web的技术讲解
web的技术讲解
JavaScript 其它杂项
共7Star
详细介绍
js跨域详解
- 参考: http://www.ruanyifeng.com/blog/2016/04/cors.html http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html https://github.com/wangdawei0418/steamDataAPI/blob/master/http.js
为什么会产生跨域
-
原因:浏览器的同源策略
-
a网页设置的cookie,b网页不能打开,除非这两个同源
同源:
-
协议相同:http或https
-
域名相同
-
端口相同
- 同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
非同源,共有三种行为受到限制。
-
Cookie、LocalStorage 和 IndexDB 无法读取。
-
DOM 无法获得。
-
AJAX 请求不能发送。
- 同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
解决跨域办法
- JSONP
- 网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
- WebSocket
-
WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信
-
类似qq
-
详情查看http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
- CORS
- CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
如何实现
- JSONP:
- 浏览器:
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address is: ' + data);
};
- 服务器:
let params = urlLib.parse(req.url, true).query;
let callback = params.callback;
let data = '数据'
res.end(callback + "(" + data + ")")
cors详细:
-
版本:所有浏览器都支持,ie>=ie10
-
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
-
简单请求:请求方式
-
Head
-
get
-
post
-
-
HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
-
解决办法:服务端设置
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
*(1)Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
*(2)Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
*(3)Access-Control-Expose-Headers
该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。
-
0 Star
-
225 Star
-
0 Star
-
0 Star
-
46 Star
-
4171 Star
-
0 Star
-
16 Star