最近更新
阅读排行
读过本文章的之后读了
关注本站

解决跨域都有哪几种方法

阅读:1853 次   编辑日期:2016-11-07

概述:

得有半年没更新了吧,有时间我就想陪着我的小公主玩儿,就把更新的事儿给放下啦,今天有点时间,讲讲跨域的问题,跨域的问题虽然不经常遇到,但是却经常被问到,什么是跨域,怎么就算跨域了,我们之前讲过,这里不多说,今天我们讲讲解决跨域都有哪几种方法~

怎么就算跨域了,请阅读《怎么就算跨域了》
解决跨域都有哪几种方法 解决跨域都有哪几种方法

JSONP:

什么是JSONP,JSONP原理是什么,请阅读《解决跨域问题,聊聊JSONP》

WebSocket:

WebSocket其实是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。这个协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信,为什么呢,我们来说说。
举个栗子:
	GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
上面有一个Origin字段,表示请求来自哪个域名,服务器根据这个字段判断是否允许通信,如果在可以通讯的列表内,服务器就会做出相应。
	HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat

CORS:

CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写,上面讲的JSONP只能发GET请求,但是这个CORS能发各种请求。
CORS其实也有个Origin字段:
	GET /cors HTTP/1.1
    Origin: http://api.bob.com
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...
如果这个字段在服务器允许范围内,就会返回添加一个叫做Access-Control-Allow-Origin的字段,这个字段里面要么会是请求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
将本篇文章分享到:
top