vue使用代理proxy配置，解决跨域

跨域的解决办法有很多，比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。

访问接口：https://fs.52yiyantang.com/index.php?g=Fs&m=FsApi&a=index

那么在ProxyTable中具体配置如下:

proxyTable: {
      '/api': {
        target: 'https://fs.52yiyantang.com/', // 你要代理的域名和端口号，要加上http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'   //或者 '^/api': ''
        }
      }
    },

api配置部分：

axios请求页面代码：（this.GLOBAL.API_TEST2是我个人在mian.js中配置的）

 

注：proxy只是解决了开发环境的跨域，线上依然会产生跨域的问题。上线时需要配置nginx！

 

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

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

location /api/ {
        # 把 /api 路径下的请求转发给真正的后端服务器
        proxy_pass http://xx.xx.xx.xx:5568;

        # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
        proxy_set_header Host $http_host;

        # 把cookie中的path部分从/api替换成/service
        proxy_cookie_path /api /;

        # 把cookie的path部分从localhost:8080替换成your.domain.name
        proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
    }

重新启动一下 nginx