一招解决跨域问题

为什么会出现跨域？

跨域问题的出现是因为浏览器的同源策略问题, 所谓同源：指的是两个页面具有的协议(rotocol)、主机(host)、端口号（port） 完全相同，它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

比如：在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，如果A地址和B地址的：协议(rotocol)、主机(host)、端口号（port） 不全相同，则说明请求是跨域的；

如何解决跨域问题？

思路：

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

1. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

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

devServer帮助解决跨域问题

如果你的前端应用和后端的API 服务器没有运行在同一个主机上，我们需要在开发环境下将 API请求代理到 API 服务器。可以通过 vue.config.js中的 devServer 中的 proxy进行配置

devServer:{
     // 代理配置
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
}