vue跨域配置代理打包访问不到

项目场景：

vue配置代理解决跨域

问题描述

vue在config.js里的dev里配置了代理只是适用于开发环境，npm run dev 运行的就是dev里的东西，打包后自然访问不到

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://xxxx:9000',----后台服务器----
        changeOrigin: true,
        logLevel: "debug",
        pathRewrite: {
          '^/api': ''
        }
      }
      }
    },

---

原因分析：

跨域：前端向服务器发送一个请求，由于协议，主机名，端口号造成浏览器跨域（服务器能返回数据，但是浏览器认为跨域不返回），所以开发环境里要配置个代理，这样前端比如http://localhot:8000/api发送请求会自动转到target值，再由target去访问服务器，协议ip端口全一样就不会跨域了，这也是为什么浏览器看到的请求接口是后台的，因为前端代理的

---

解决方案：1.将axios换成ajax发送请求,利用jsonp，jsonp只适用于get请求 2.配置代理，如上

      let that = this     ------这里用that定向this，可以解决浏览器有返回值但是渲染不出来的问题
       $.ajax({
         type: "get",
         url: window.GLOBAL_CONFIG['Url'] + '/api/MANGFU',
        success: function (data) {
           that.Data = data.data
       }
       })

解决打包方案：—针对配置代理— 部署项目nginx里配置代理服务器，相当于前端的开发环境下的代理原理一样，利用代理服务器发送请求就不会跨域，因为服务器与服务器间不存在跨域问题

```html
     location /api {
            proxy_pass  http://xxxx:9000;
        }