前端跨域及其解决方案

跨域：

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

如何判断跨域请求

在A地址(发起请求的页面地址)向B地址(要请求的目标页面地址)发起请求时，如果A地址和B地址在:协议 域名 端口 不全相同，则说明请求是跨域的;

跨域请求报错的原因

浏览器的同源策略 && 请求是ajax类型
说明:同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。他能帮助阻隔恶意文档，减少可能被攻击的媒介。 —来源 MDA

---

解决方案：

前端用JSONP方式去发请求(jsonp不是ajax请求)
后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错
代理转发

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

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

实现思路

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：
1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明
在vue-config.js配置文件中的devServe里配置

   // 代理配置
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      '/api': {
        target: 'http://192.168.71.189:3000' // 我们要代理的真实接口地址
      }
    }
    // before: require('./mock/mock-server.js')
  }