跨域

• 1. 同源策略
• 2. 同源限制策略有哪些？
• 3. 为什么会有跨域请求？
• 4. 跨域的方式有哪几种？
  • （一）JSONP
  • （二）CORS
  • （三）postMessage

1. 同源策略

查看答案

协议、域名、端口号有一个不相同，即为跨域。

2. 同源限制策略有哪些？

查看答案

1. 跨域之后允许进行跨域写操作（跳转，重定向）
2. 跨域之后允许跨域资源嵌入（script，img，link）
3. 跨域之后不允许跨域读操作

3. 为什么会有跨域请求？

查看答案

因为项目中，不同的工程有不用的服务器，用不同的域名，在调用的时候，就会出现跨域。

4. 跨域的方式有哪几种？

查看答案

（一）JSONP

在页面上引入不同域上的js脚本文件却是可以的，加载文件之后执行回调callback，将需要的参数传入。

缺点：只能进行GET请求，错误机制处理不如XMLHttpRequest

（二）CORS

通常使用CORS时，异步请求会被分为简单请求和非简单请求。

• 简单请求有：

  • GET
  • HEAD
  • POST（Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded）
  • 请求报文中有Referer和Origin，响应报文中会设置Access-Control-Allow-Origin: *

• 非简单请求有：除了简单请求剩下的

  • PUT
  • DELETE
  • OPTIONS
  • ...
  • 在真正的请求之前，会发送预检请求，OPTIONS里面会带着

  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: X-PINGOTHER
  

  • 服务器会返回他允许的方式，头，域名以及预检请求的过期时间

  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
  

  • 需要设置 XMLHttpRequest 的 withCredentials 为 true。
  • 服务端返回的响应头中的 Access-Control-Allow-Credentials 字段存在且为 true 时，Access-Control-Allow-Origin 必须指定请求源的域名，否则响应失败。

（三）postMessage

window.postMessage(message,targetOrigin)

方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。