最近开发中遇到一个问题,前后端项目分离跨域问题,首先想到了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;
        }
 }

配置如上,请多多指点,谢谢大家。

Logo

前往低代码交流专区

更多推荐