跨域问题及跨域问题的解决

为什么会有跨域？

        直接使用前端向后端发请求（后端并没有开启cors）

列如

 怎么解决跨域问题？

        vue-cli代理解决跨域问题

        在后端没有开启cors的情况下,浏览器的同源策略会直接限制后端返回的数据给前端。这是因为我们所有的项目都是前后分离，前端一个服务，后端一个服务，后端不开cors只能前端自己想办法。

既然前端不能直接请求后端服务，那就搞个中间服务，中间服务刚好和我们的前端服务同源，前端和中间服务可以通信，而中间服务是node, node后台向后端发请求是不受同源策略影响的，因为同源策略只针对浏览器！！！， 这样就是代理，中间层的服务将前端的请求代理给了后端接口。 

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

 

思路：

1. vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。
2. vue-cli脚手架支持配置一个代理： 将指定的类型请求，转发到目标服务器。
3.  a.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求b.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

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

注意： 要去掉before这个选项，这个是mock数据，会影响到我们的请求，并且修改完成之后要重启服务。

重启项目，验证结果

1. 修改了配置文件，一定要重启前端项目
2. 再次测试登陆接口，我们发现：跨域问题已经解决了.