Vue脚手架解决跨域问题，配置代理-CFANZ编程社区

配置代理

跨域问题是由于浏览器的同源策略出现的，即前端端发送Ajax到服务器请求数据，会发生跨域问题，导致拿不到返回的数据。常用3种方式解决：
1.CORS
这种方式是后端人员对请求做处理
2.JSONP
这种方式是在 script标签发请求，利用script不受同源的限制，缺点是只能发get请求，并且需要后端配合
3.配置代理
Vue脚手架处理跨域问题采用配置代理的方式，参考官方文档这里，比如当前前端处于http://localhost:8080，需要请求的数据在http://localhost:5000，这就产生了跨域，配置代理的原理是有一台代理服务器作为中间服务器，它与前端服务器是同源的。前端服务器发送请求给代理服务器，代理服务器再把请求发给后端服务器，最后在把结果通过代理服务器交给前端。
整个过程是：
1.前端发请求

axios.get('http://localhost:8080/atguigu/students').then(
response=>{
console.log(response.data)
},
eror=>{
consonle.log(error.message)
}
)

解释添加/atguigu：这只是举例，可以任意比如/api，如果不加这个，如果本地public也有students这个资源，那么会首先拿到本地的students，所以加这个加以区分，表示去别的服务器请求数据
2.配置代理 —在vue.config.js中
方式一：

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'//请求资源所在服务器
  }
}

这种方式简单，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源），缺点是不能配置多个代理。
方式二：

module.exports = {
  devServer: {
    proxy: {
      '/atguigu': {//以/atguigu开头的
        target: '<'http://localhost:5000'>',//请求的资源所在的服务器
        pathRewrite:{'^/atiguigu':''}
        ws: true,//用于支持websocket
        changeOrigin: true//用于控制请求头中的host值
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

解释：之所以以/atiguigu开头是因为用于区别请求的是后端资源而不是前端，

   pathRewrite:{'^/atiguigu':''}

重写路径，因为后端的资源路由并不是/atiguigu开头的

 changeOrigin: true//用于控制请求头中的host值

这个开启可以看到请求来自于的真实路径，真实8080，代理（假）5000
经过以上配置，代理配置解决跨域就完成了。