vue-cli3跨域配置

vue-cli3跨域配置

版本是vue-cli3， 学习途中遇到跨域问题：

方法

添加vue.config.js

代码如下

module.exports = {
  baseUrl: './',    //我把这行删除了
  productionSourceMap: false,
  devServer: {
    proxy: {
      '/appz': {
        target: 'http://t.weather.sojson.com/api/weather/city/',
        changeOrigin: true,
        pathRewrite: {
          '^/appz': ''
        }
      },
      '/appy': {
        target: 'http://cdn.sojson.com/_city.json',
        changeOrigin: true,
        pathRewrite: {
          '^/appy': ''
        }
      }
    }
  }

}

/appz 将替换成接口的地址，
这里是写了两个接口的地址，一个就只要写一个，多个就复制。

这段参考源为：http://blog.51weblove.com/blog/180.html

接口调用案例

我这里用了个天气接口，地址在这
https://www.sojson.com/api/weather.html

export default {
  name: 'HelloWorld',
  data () {
    return {
      inputcity: ''
    }
  },
  methods: {
    searchW () {
      console.log('天气查询')
      this.$axios.get('/appz' + this.inputcity)
        .then(function (re) {
          console.log(re)
        })
        .catch(function (err) {
          console.log(err)
        })
    }
  }
}

nginx反向代理

有群友说这个方法只能本地用，打包后就行不通了。说用nginx反向代理。

等我打包时再更新这个问题。。。。
如下是nginx方法

https://www.cnblogs.com/xiangsj/p/8905648.html