vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图：

解决办法：

1. npm start 本地开发环境解决：

在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true,

proxyTable: {
      /api:{
        target:http://xx.xx.xx.xx:5568,
        changeOrigin:true,
        pathRewrite:{
            ^/api:/api
        }
      }
    },

proxyTable: { /api:{ target:http://xx.xx.xx.xx:5568, changeOrigin:true, pathRewrite:{ ^/api:/api } } },

2. npm run build 把 dist 放线上后解决：

nginx 的 配置文件 xx.conf 的 server {} 里加如下：

重新启动一下 nginx

/etc/init.d/nginx reload

/etc/init.d/nginx reload

api 跨域 访问成功

前后分离 axios 接 api 跨域问题如图： 解决办法： 1. npm start 本地开发环境解决： 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { /api:{ target:http://xx.xx.xx.xx:5568, changeOrigin:true, pathRewrite:{ ^/api:/api } } }, 2. npm run build 把 dist 放线上后解决： nginx 的 配置文件 xx.conf 的 server {} 里加如下： 重新启动一下 nginx /etc/init.d/nginx reload api 跨域 访问成功