什么是同源策略
同源策略
同源策略是浏览器的安全机制。
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
例如，使用Ajax向另外一个网站请求资源，这个时候浏览器就会拦截掉响应，因为请求网站与响应网站不是同源的。
什么是同源
当两个url的协议，域名，端口都相同，则说这两个url是同源的。
http://baidu.com/a/b.js
https://baidu.com/a/b.js
（这两个url不同源，因为协议不一致）
http://baidu.com/main.js
http://qq.com/a.php
（这两个url不同源，因为域名不一致）
http://baidu.com/a/b.js
https://baidu.com:8080/a/b.js
（这两个url不同源，因为端口不一致）
什么是跨域？跨域有几种实现形式？
同源策略是个很好的安全机制，但是有时候我们需要从不同的域下获取数据或者进行交互，这个时候同源策略会造成阻碍。
跨域，就是为了实现不同源下数据信息传输和交互。
实现跨域有下面几种方式：
1.JSONP
JSONP是JSON with padding（参数式JSON）的简写，是JSON的一种新应用方式。
JSONP的实现，依靠动态的<script>元素来使用，因为<script>不受同源策略限制，有能力从其他域中加载资源，示例：
通过<script>请求返回一个JSONP
<script src=""http://freegeoip.net/json/?callback=handleResponse></script>
返回的JSONP由两部分组成：回调函数和JSON数据
handleResponse(JSON)
由于通过<script>标签请求的数据会被当做js代码执行，因此回调函数会对JSON数据进行处理，在这个示例里，回调函数就是handleResponse。通常回调函数名会以参数的方式写进请求url中，且在本地定义好回调函数。
缺点：JSONP是从其他域中加载代码执行，如果其他域不安全，则响应中很可能夹带一些恶意代码，此时除了放弃使用JSONP外，没有办法追究，因此要保证数据来源的安全。
2.CORS
CORS（Cross-Origin Resource sharing，跨域资源共享）是Ajax跨域请求的一种方式，定义了在必须访问跨域资源时，浏览器与服务器应该如何进行沟通。
CORS背后的基本思想，就是使用定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否应该成功。
CORS分为简单请求和复杂请求
同时满足下面两个条件的为简单请求：
1.请求方式为get、post、head三者中的一种；
2.请求头信息不超出这几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
简单请求示例：
在我们跨域发送一个简单请求时，会定义一个Origin头部，说明请求来源
Oring:http://www.baidu.com //说明这一个请求是http://www.baidu.com发出的
如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中返回相同的源信息（假设为公共资源，则可以返回“*”）
Access-Control-Allow-Origin:http://www.baidu.com
如果没有这个头部，或者头部的源信息不匹配，浏览器就会拦截掉返回的响应。
除了简单请求外，都是复杂请求
复杂请求与简单请求类似，只是在发送正式请求之前，会先发送一个预检请求，确认当前域是否在服务器许可范围中，服务器可以接受什么HTTP头信息、请求方式、数据类型等。得到许可回复以后，才会开始正式通信。
下面是预检请求头和响应头
//这是一个预检请求头
OPTIONS /cors HTTP/1.1 //注意请求返回为options；
Origin: https://api.qiutc.me //请求来源；
Access-Control-Request-Method: PUT // 请求的方式
Access-Control-Request-Headers: X-Custom-Header //请求头额外信息；
Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
//这是一个预检响应头
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.me
Access-Control-Allow-Methods: GET, POST, PUT //表明服务器支持的所有跨域方法
Access-Control-Allow-Headers: X-Custom-Header //表明服务器支持的额外请求头
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
3.降域
有这么两个url：
http://www.123.baidu.com
http://www.321.baidu.com
这两个url是同一个主域名下的两个子域名，是不同源的，因此不能交互或者数据传输。
这个时候就可以使用降域来实现数据传输和交互
document.domain = "baidu.com"
!!注意降域只能在主域名相同的情况下才能生效!!
4.postMessage
postMessage()方法也是实现跨域交互的一种方式，是html5提供的新方法。
假设有这么一个HTML，父域与子域不同源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
</body>
</html>
我们可以用postMessage()先向iframe窗口发送data
window.frame[0].postMessage(data,"*")
在iframe的页面中，我们可以监听“message”事件来获取信息
window.addEventListener("message",function(e) {
console.log(e.data);
)
这样也可以实现跨域交互。
网友评论