解决跨域--反向代理（详解）

跨域请求是非常常见的现象，跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

跨域的解决方案其实有好几种：

a.前端用JSONP方式去发请求（jsonp不是ajax请求）

b.后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

c.之前也有总结，今天主要讲一下反向代理：  

跨域-Vue-Cli配置反向代理：

vue-cli中集成的跨域解决方案

 思路：

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：

1. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

2. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可

vue-cli解决跨域配置说明：

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角：、

（其中changeOrigin，pathRewrite根据自己需要自行选择写与不写）

module.exports = {
  devServer: {
        // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // http://localhost:9588/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 打比方这是我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
         // 假设我们想把 http://localhost:9588/api/abc 变成www.baidu.com/abc 就需要这么做 
         '^/api': '' 
        }
      },
    }
  }
}

重启项目，验证结果

1. 修改了配置文件，一定要重启前端项目

2. 再次测试登陆接口，我们发现：跨域问题已经解决了

小结

1. vue-cli集成了跨域代理功能------ 只能用在开发阶段。

2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

特别强调：

ajax的基地址baseUrl必须是相对地址，而不能是绝对地址