跨域系列问题及解决方案总结

- 什么是跨域？

浏览器的非同源为跨域。即两个页面拥有不同的协议（protocol）或端口（port）或主机（host）

- 为什么会出现跨域问题？

出于浏览器的同源策略限制，浏览器会拒绝跨域请求。
*注：严格的说，浏览器并不是拒绝所有的跨域请求，实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的：

通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向；
通常浏览器允许跨域资源嵌入（Cross-origin embedding），如 img、script 标签；
通常浏览器不允许跨域读操作（Cross-origin reads）。*

- 为什么有跨域需求?

工程服务化后，不同职责的服务分散在不同的工程中，往往这些工程的域名是不同的，但一个需求可能需要对应到多个服务，这时便需要调用不同服务的接口，因此会出现跨域。

- 解决跨域方法

通常，最常用的跨域方式有以下三种：JSONP、CORS、postMessage。

1.、JSONP

核心思想：因此网页通过<script>向服务器请求JSON数据，服务器在收到请求后将数据放在指定名字的回调中返回。（刚刚说了不能通过XMLHttpRequest请求不同域上的数据（Cross-origin reads）。但是，在页面上引入不同域上的js脚本文件却是可以的（Cross-origin embedding）。
实现方式（需前后端配合）

<script type="text/javascript">
    function dosomething(data){
        //处理获得的数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

【JSONP的优缺点】
优点：兼容性好（兼容低版本IE）
缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

2、CORS

CORS 是W3C 推荐的一种新的官方方案，能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。
通常使用CORS时，异步请求会被分为简单请求和非简单请求，非简单请求的区别是会先发一次预检请求。

• 【简单请求】

GET
HEAD
POST- 仅当POST方法的Content-Type值等于下列之一才算作简单请求
       - text/plain
       - multipart/form-data
       - application/x-www-form-urlencoded

Origin: foo.example 表明该请求来源于 foo.exmaple。
Access-Control-Allow-Origin: * 表明该资源可以被任意外域访问。
【非简单请求】

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

• 预请求：

Access-Control-Request-Method: POST 告诉服务器，之后的实际 请求按照POST方式
Access-Control-Request-Headers: X-PINGOTHER   Content-Type告诉服务器，实际请求将携带两个自定义的请求首部字段 ，服务器据此决定是否被允许

• 预请求响应

Access-Control-Allow-Origin: foo.example    // 标识可接受的跨域请求源； 
Access-Control-Allow-Methods: POST, GET, OPTIONS   //标识可接受的跨域请求方法, Access-Control-Allow-Headers: X-PINGOTHER, Content-Type //标识可接受的跨域请求自定义头；  
Access-Control-Max-Age: 86400。 //标识本次预请求的有效时间（秒），期间内无需再发送预请求；

带有带HTTP Cookies 和验证信息的跨域请求

通常不会跨域，但也有一些情况需要打通不同的登录态，需要设置 XMLHttpRequest 的某个特殊标志位。比如下面代码，可以把 XMLHttpRequest 的 withCredentials 设置为 true，这样浏览器就能跨域发送凭证信息。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

3、postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

otherWindow.postMessage(message, targetOrigin, [transfer]);

本文参考 https://juejin.cn/post/6844903496521613320