前端如何处理跨域?

说到跨域就不得不简单说一下浏览器的同源策略:

一. 同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同(反之则是跨域)，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 Js对象无法获得
3. AJAX 请求不能发送

二. 什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

包括:

1. 资源跳转：A链接、重定向、表单提交
2. 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3. 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

三. JSONP

只能处理 GET请求，原理是利用 script 标签的 src 不存在跨域限制这一特性实现的(标签的herf属性也能跨域)

JSONP的优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

四. 跨域资源共享（CORS）

基本原理是后端通过设置响应头（Access-Control-Allow-Origin）来允许跨域, 如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

简单跨域请求：服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

非简单跨域请求: 非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。非简单请求需要根据不同情况配置不同的响应头

五. (正向/反向)代理服务器

正向代理: 是指一个位于客户端和目标服务器(target server)之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标(目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。

反向代理（Reverse Proxy): 是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

如果是 vue-cli 这个脚手架创建的项目，根目录新建 vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': { // 请求的代称，写在Axios里的BaseUrl 
                target: 'http://localhost:8088/spring', // 真实请求的URL 后台接口域名
                ws: true, //  //如果要代理 websockets，配置这个参数
                secure: false,  // 如果是https接口，需要配置这个参数
                changeOrigin: true, // 允许跨域
                pathRewrite: { //替换，通配/api的替换成对应字符
                    /* 重写路径，当我们在浏览器中看到请求的地址为： 
                      http://localhost:8080/api/core/getData/userInfo 时
                        实际上访问的地址是： 
                      http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api
                    */
                    '^/api': '' //当你的接口中没有/api字眼时，采用这种，直接替换成空即可
                //     '^/api': '/api'   当你的接口中刚好有/api 时，采用这种方式
                }
            }
        }
    }
}