vue cli配置代理解决跨域问题

跨域问题

是由于违背了同源策略，同源策略规定了协议名、主机名、端口号必须一致
我们目前所处的位置是http localhost 8080，我们想向一台服务器发送请求，它的位置是http localhost 5000，我们的ajax请求从浏览器发送到服务器，服务器收到了这次请求并把数据交给了浏览器，但由于违背了同源策略，浏览器不会让我们进一步拿到数据

---

解决跨域问题

1.cors
在服务器中添加特殊的响应头
2.jsonp
利用了script标签的src属性，在引入外部资源的时候不受同源策略的限制
（真实开发用的不多，只能解决get请求的跨域问题）
3.配置一个代理服务器

借助vue cli可以开启一个代理服务器
⚠️：代理服务器的端口号也是8080，以后我们发送请求的时候端口号写8080即可

---

vue cli配置代理

方法一：在vue.config.js中添加如下配置：

module.exports = {
  devServer:{
    proxy: "http://localhost:5000"
  }
}

⚠️：proxy配置中的端口号写的是服务器的端口号

说明：

1. 缺点：不能同时配置多个代理
2. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器

方法二：
在vue.config.js中添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 匹配所有以'/api1'开头的请求路径
        target: "http://localhost:5000", // 代理目标的基础路径
        changeOrigin: true, // 用于控制请求头中的host值，默认也为true，可以不设置
        pathRewrite: {'^/api1':''}  
      }
    }
  }
}

说明：

1. 若不配置pathRewrite，则因为我们的请求路径需要加上'/api1'前缀，发送给服务器的请求路径中也会加上'/api1'，导致请求路径错误
2. 当changeOrigin为true时，服务器收到的请求头中host为:localhost:5000，当changeOrigin为false时，服务器收到的请求头中host为:localhost:8000
3. '/api1’在发送ajax请求时，是添加在请求路径的端口号后
4. 优点：可以配置多个代理

（请求路径统一加上/api1就方便监测，只需要监测/api1就行了，就不用监测/students以及可能有其他的名字，但是就是需要配置pathWrite再统一删去/api1才发送的是正确的请求）

---

完