Vue通过代理方式解决跨域问题

项目属于前后端分离，后端部署在本地8080端口，访问地址8080/plcon

前端部署在本地3000端口，访问地址3000/plc

同时，前端界面存在直接访问第三方天气接口，更是明显的跨域。

花了小半天，结合网上搜的一堆，总数试验成功了，记录一下。

具体配置如下：

     1）env.development(production)

VUE_APP_API_BASE_URL=/

修改后台地址为/，因为axios会以此地址作为baseURL，如果直接写成全路径地址如http://locahost:8080/plcon，则后面配置的代理将会被忽视。

     2）vue.config.js

增加代理配置，此处增加了两处代理，一个是系统默认后台，另外是第三方接口API。

devServer: {

    sockHost: serverIp + ':3000/plcon', // 解决远程访问 报localhost:sockjs-node/info?t=1562204191563 错误,  https://webpack.js.org/configuration/dev-server/#websockettransport

    disableHostCheck: true,

    port: 3000,

    proxy: {

      '^/server': {

        target: 'http://' + serverIp + ':8088/plcon/', // 后端地址

        ws: true,

        changeOrigin: true,

        pathRewrite: {

          '^/server': ''

        }

      },

      '^/weathercity': {

        target: 'http://t.weather.sojson.com/api/weather/city/', // 请求天气信息

        ws: true,

        changeOrigin: true,

        pathRewrite: {

          '^/weathercity': ''

        }

      }

    }

  },

    3）所有访问后台服务的url，前面统一增加/server,效果如下：

  data() {

        return {

            url: '/server/COP/copline',

            beginDate: getDayArround(-6)+" 00:00:00",

/server会被替换成空串。

同样，上述天气接口的调用时，url写成

      apiurl: '/weathercity/101030100',

最终真实访问的url是：http://t.weather.sojson.com/api/weather/city/101030100

遗憾的是这个天气API更新比较慢，据说是8小时一次。