最近开发中遇到一个问题,前后端项目分离跨域问题,首先想到了Nginx解决跨域问题,之后又涉及到项目上线联调测试,因为是两个项目一起的原因,需要涉及多端口问题,特公示代码如下,供大家参考解决提供思路。后续域名下来,还会配置ssl。因为ssl是不能为ip提供https,这点大家要注意下。
server {
#nginx默认监听80端口,也免去了访问http://192.168.0.1:8008类似的尴尬,直接http://192.168.0.1即可。
#其主要是通过location /匹配对应的端口
listen 80;
server_name localhost_name;
#后台管理系统 生产环境(/prod-api,请求路径区分,例如http://192.128.0.1/prod-api/getUserInfo)
location /prod-api{
rewrite ^/prod-api/(.*)$ /$1 break;
proxy_pass http://localhost:8080/;
}
#后台管理系统 开发环境(说明:暂时未上线,为区分端口号,都是8080)
location /dev-api{
rewrite ^/dev-api/(.*)$ /$1 break;
proxy_pass http://localhost:8080/;
}
#小程序后台系统(/wx-api,请求路径区分,例如http://192.128.0.1/wx-api/getUserInfo)
location /wx-api{
rewrite ^/wx-api/(.*)$ /$1 break;
proxy_pass http://localhost:8008/;
}
#前端页面请求(不区分请求路径,默认http://192.168.0.1/)
location / {
#配置vue打包之后上传服务器的文件绝对路径(这里vue打包申明,config.js中 publicPath: '/',而不是网上所说的 publicPath: './')
# index.js中router配置mode: 'history',是为了取消/#/的问题
root /home/web/dist;
#配置访问dist中的html文件
index index.html index.htm;
#配置防止刷新页面404问题
try_files $uri $uri/ /index.html;
}
}
配置如上,请多多指点,谢谢大家。