浏览器的同源策略
限制引起的跨域问题 同一协议、同一域名、同一端口
同源策略的限制范围
`cookie、localstorage、indexdb`无法读取。
`DOM`无法获取。
`ajax`请求不能发送。
“跨域资源共享” 简称 “CORS
”
cors通过响应头
中指定的源头
与当前源点相匹配来实现跨域
简单请求:`Access-Control-Allow-Origin`
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
非简单请求:PUT或DELETE,或者Content-Type字段的类型是application/json
"预检"请求(preflight)
`Access-Control-Request-Method`
`Access-Control-Request-Headers `
JSONP
只支持 GET
请求,显然是没有CORS
模块强大的。 JSONP
的优势在于支持老式的浏览器
,以及可以向比支持CORS
的网站请求数据。
利用页面中的`脚本标记` <script>的加载来实现跨域请求
function showJsonp(obj){
console.log(obj.message);
}
var url = 'http://127.0.0.1:8787/?func=showJsonp'
var script = document.createElement('script');
script.setAttribute('src',url);
script.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
Nginx
代理服务器配置跨域
{
"/api": {
"target": "http://ss.sss.cn/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/api": "/api"
}
}
}
WebSocket
:是一种长连接的通信协议。使用ws://
(非加密)和wss://
(加密)作为协议前缀,不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
网友评论