VUE项目解决用vue-reource跨域请求接口的问题

当在开发vue项目时，不可避免的要使用访问接口，常用的访问接口的方法，都会出现跨域请求的问题

postInfo() { // 发起 get请求   application/x-wwww-form-urlencoded
          //  手动发起的 get请求，所以，有的服务器处理不了
          this.$http.get('http://apis.juhe.cn/simpleWeather/query?key=71383d002bed110f3d05b3b5d37dbfbe&city=%E4%B8%8A%E6%B5%B7').then(result => {
            console.log(result.body)
          }).catch(function(error){
            console.log(error);
            vm.errprMsg=error;
          })

浏览器会爆出这样的错误

浏览器控制台提示有跨域问题。

解决办法：

• 前端解决的办法
• 后端解决的办法

前端解决的办法是：

在webpack中的配置文件将接口重写。

在webpack.config.js文件中
其中port 和host根据自己的电脑改变
target 是你的目标接口地址

module.exports = {
devServer:{
    port:"4002",
    host:"127.0.0.1",
    open:true,
    proxy:{
      '/api':{
        target:'http://apis.juhe.cn/simpleWeather/query',
        pathRewrite:{'^/api':''},
        changeOrigin:true,
        secure:false
      }
    }
  },
}

组件中发起请求

 methods: {
        getdata() {
            this.$http.get("/api" +"?key=71383d002bed110f3d05b3b5d37dbfbe&city=%E4%B8%8A%E6%B5%B7").then(result => {
                    console.log(result);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    }

这样就会获取到数据

后端解决的办法

在后端接口中加上

response.setHeader("Access-Control-Allow-Origin","*");