Vue、React脚手架解决跨域问题，配置代理

配置代理

跨域问题是由于浏览器的同源策略出现的，即前端端发送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
经过以上配置，代理配置解决跨域就完成了。

React配置代理

基本原理是一样的。两种方式，第一种简单只能配置一个服务器，第二个繁琐，但是可以配置多个

方法一：

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二：

1. 第一步：创建代理配置文件

   在src下创建配置文件：src/setupProxy.js
   

2. 编写setupProxy.js配置具体代理规则：

   const proxy = require('http-proxy-middleware')
   
   module.exports = function(app) {
     app.use(
       proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
         target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true, //控制服务器接收到的请求头中host字段的值
         /*
         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
       }),
       proxy('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }
   

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。