跨域问题&解决方法

1.测试服务器

    在login页面上，点击登录，查看后端服务器的反应，后端能收到请求，但是前端网页上出现了跨域错误；

 

遇到了一个熟悉的错误：ajax跨域错误！

注意：跨域错误本质问题出在浏览器，而不是服务器端，服务器是可以顺利收到请求的

本地服务器不允许跨域访问的（线上的服务器是经过了特殊处理的，它支持跨域访问）

 2.跨域-原因及解决方案

    如何判断请求是否跨域

       在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，

    如果A地址和B地址在： 协议 域名 端口 不全相同，则说明请求是跨域的；

     跨域请报错的原因

请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的

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

解决方案

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

      重启项目，验证结果

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

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

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

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

• 代理转发

• 

   

  3.跨域-Vue-Cli配置代理转发

  目标

  通过配置vue-cli请求代理解决开发环境下的跨域问题

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

   

  思路：

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

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

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