目录
本文参照小码哥的网络协议视频记录
CORS
同源策略
浏览器有个同源策略(Same-Origin Policy)。它规定了默认情况下,AJAX请求只能发送给同源的URL。同源是指3个相同:协议,域名(IP),端口。
下表给出了与URL http://store.company.com/dir/page.html的源进行对比的示例:
URL | 结果 | 原因 |
---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
https://store.company.com/secure.html | 失败 | 协议不同 |
http://store.company.com:81/dir/etc.html | 失败 | 端口不同(http://默认端口是80) |
http://news.company.com/dir/other.html | 失败 | 主机不同 |
img,script,link,iframe,video,audio等标签不受同源策略的约束。
跨域资源共享
解决AJAX跨域请求的常用方法有CORS(Cross-Origin Resource Sharing),跨域资源共享(Origin是源头,Cross是跨越,合起来是跨域)。CORS的实现需要客户端和服务器同时支持,客户端所有浏览器都支持(IE至少是IE10版本);服务器需要返回相应的响应头(比如Access-Control-Allow-Origin),告知浏览器这是一个允许跨域访问的请求。
// 设置CORS(允许来源为http://localhost:63342的请求能够跨域访问)
response.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
在客户端所发请求的请求头中可以加入Origin头字段,可发起一个针对跨域资源共享的请求。如Origin: http://localhost:63342,告诉浏览器请求的来源协议,域名和端口是什么,浏览器再根据Origin的内容判断是否允许跨域访问资源。
request.getHeader("Origin")