如何用nginx解决前端部署跨域问题
作者：biaobiaogege
这篇文章主要介绍了如何用nginx解决前端部署跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
该方法是在云服务器上【ubuntu18.04】源码编译nginx，【另外一种直接用apt下载】
源码编译安装
- 下载
wget http://nginx.org/download/nginx-1.19.0.tar.gz sudo tar zxf nginx-1.19.0.tar.gz
- 安装依赖软件
sudo apt install -y gcc make libpcre3 libpcre3-dev zlib1g zlib1g-dev openss
- 编译
cd nginx-1.19.0/ sudo ./configure sudo make sudo make install
得到以下结果，编译安装成功
命令
/usr/local/nginx/sbin/nginx是个可执行文件，是nginx的main process
cd /usr/local/nginx/sbin ./nginx -v //查看版本号 ./nginx //启动nginx ./nginx -s stop //停止nginx ./nginx -s quit //安全退出 ./nginx -s reload //重新加载配置文件【常用】 ps aux|grep nginx 查看nginx进程
前端部署反向代理配置
/usr/local/nginx/conf 文件下的nginx.config是配置文件
nginx.config文件主要有全局块，events块，http块。主要在http块配置
sudo vim /usr/local/nginx/conf/nginx.config
找到http块下的server块，修改类似于如下代码块，即能完成反向代理配置。
server {
listen 80; #监听端口
server_name localhost; #可以改成自己的域名或者ip
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root dist; # 前端build文件所在位置与/usr/local/nginx/conf平级
index index.html index.htm; #入口文件
try_files $uri $uri/ /index.html; #好像可以解决history路由，不过我用的hash
}
location /shadow/api { # 这个就是代码中的想要访问的baseurl
proxy_pass http://1.13.xxx.xxx:80; # [例如]反向代理的服务器真正的ip
add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
}保存只会用命令进行配置重新加载
sudo /usr/local/nginx/sbin/nginx -s reload
效果
如果build正确，并且配置生效，直接在浏览器访问【xxx.xxx.xxx.xxx:80】能够看到前端页面，括号里面是云服务器的ip，进入自己租的云服务器界面复制，比如腾讯云在下图这里复制。
不是配置的反向代理的ip
以上例子的反向代理ip是http://1.13.xxx.xxx:80
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。