vue的学习笔记：vue脚手架配置代理服务器（解决跨域问题）

vue脚手架配置代理

原理

配置一台和当前页面同源的服务器（这样就不会产生跨域问题了），咱们只需要把请求发给这个新开的代理服务器，由这个新开的代理服务器来代替咱们前端界面发送网络请求。又因为代理服务器和后端服务器都是服务器他们之间只有纯粹的http请求不存在浏览器的什么同源策略。等你代理服务器接收到后端的返回结果后，代理服务器再返还给前端界面，又又因为前端界面和代理服务器同源所有没有跨域问题了。

方法一

​ 在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

​ 编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}// 通过正则表达式将url中的/api1变成空字符串，要不/api1也会跟着发往后端，会返回404
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

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