- 什么是跨域?
浏览器的非同源为跨域。即两个页面拥有不同的协议(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-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
|