最近更新
阅读排行
读过本文章的之后读了
关注本站
解决跨域都有哪几种方法
阅读：5403 次 编辑日期：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
