300字范文 > 跨域访问cookie之CORS的完美解决方案

跨域访问cookie之CORS的完美解决方案

时间：2024-06-29 16:40:15

实际应用中选择的2种跨域方式

一种是JSONP,另一种是通过CORS.前者是相对比较老的手法,后者我感觉更加给力一点

JSONP

即使是相对好用的JSONP对于非GET请求也是无能为力的,因为它本质上还是通过script去get一些资源.

JSONP这种只能GET的限制,在Angular推崇RESTful风格接口的API场景下,就完全制约了它的使用,总不能弃POST和PUT那些不管。并且JSONP的错误处理很弱,不尽人意。总之前端实现跨域都有各种各样的局限性,又比如像document.domain则只能用于主域相同,子域不同的情况.

CORS

所以总结而言,虽然前端有多种方式处理跨域,但是多而不精,缺点都比较明显.相对而言更好的方式是通过后端参与处理,这样做不仅适用性更强,同时前端只要发送正常的Ajax请求即可。这样的技术叫做CORS。

Cross-Origin Resource Sharing跨域资源共享,应该算是现在最为推荐的跨域处理方案.不仅适用于各种Method,而且更加方便和简单.当然了,这么吊的东西只有现代浏览器支持,IE8以下的老古董就不要想了。

CORS实现原理

虽然通过CORS实现跨域基本上完全由后端实现,不过身为一个给力的前端。还是要掌握一下这一原理,以便当你遇到不靠谱的后端时,不至于…你懂得

CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过HTTP方式来实现资源共享,让每个请求的服务直接返回资源.它使用了HTTP交互方式来确定请求源是否有资格请求该资源,并且通过设置HTTP Header来控制访问资源的权限.

具体的过程是这样的前端发送一个正常的请求:

$http.get('/api/data',{params:{name: '顽Shi'}})

其中：$http.get是Angular的用法，接受两个参数:

url: 请求的路径

json对象: 请求参数配置,如 {params:{id:5}}

后端设置一下response的header:

Access-Control-Allow-Origin: "*"Access-Control-Allow-Methods: "GET"Access-Control-Max-Age: "60"

然后你观察一下浏览器的行为会发现有趣的事,浏览器在没有你干预的情况下,发现这是一个跨域请求.所以它没有直接发送GET请求,而是发送了一个OPTIONS请求询问是否可以跨域访问该资源,这个过程我们可以称之为”预检“.

然后我们看到OPTIONS的response返回了类似下面的信息:

HTTP/1.1 200 OKDate: Mon, 01 Dec 01:15:39 GMTServer: Apache/2.0.61 (Unix)Access-Control-Allow-Origin: *Access-Control-Allow-Methods: GETAccess-Control-Max-Age: 60 Content-Encoding: gzip Content-Length: 0 Connection: Keep-Alive Content-Type: text/text

这里的这几个Access头的内容就是服务器后端加上去的,它告诉了浏览器此后的60秒内,所有域都可以通过GET方法进行跨域访问该资源.然后浏览器自动再次发送了真正的GET请求,并返回对应的结果.

注意这一过程是浏览器自动实现的,这一点是不是非常棒.一些header信息的设置如下:

Access-Control-Allow-Origin: <origin> | * // 授权的源控制Access-Control-Max-Age: <delta-seconds> // 授权的时间Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式Access-Control-Allow-Methods: <method>[, <method>]* // 允许请求的HTTP MethodAccess-Control-Allow-Headers: <field-name>[, <field-name>]* // 控制哪些header能发送真正的请求

如何通过CORS跨域传送cookie

这里还有一处需要前端工程师协作的地方就是cookie的传递,默认情况下通过CORS这样的方式是不会传递cookie.一般强制性将cookie添加到header的做法,也会被浏览器拒绝并报错.上面看到了在服务器端会通过添加一个response头,Access-Control-Allow-Credentials来控制是否允许Cookie的提交。

通过原生js需要设置

Access-Control-Allow-Credentials 响应头会使浏览器允许在 Ajax 访问时携带 Cookie，但我们仍然需要对 XMLHttpRequest 设置其 withCredentials 参数，才能实现携带 Cookie 的目标。

示例代码如下：

var xhr = new XMLHttpRequest();xhr.withCredentials = true;

注意，为了安全，标准里不允许 Access-Control-Allow-Origin: *，必须指定明确的、与请求网页一致的域名。同时，Cookie 依然遵循“同源策略”，只有用目标服务器域名设置的 Cookie 才会上传，而且使用 document.cookie 也无法读取目标服务器域名下的 Cookie。

在Angular中我们需要进行一些设置达到目的:

$http.post(url, {withCredentials: true, ...})// 或者$http({withCredentials: true, ...}).post(...)// 或者.config(function ($httpProvider) {$httpProvider.defaults.withCredentials = true;}

如果是jQuery则要设置如下:

$.ajax("/api/data", {type: "GET",xhrFields: {withCredentials: true},crossDomain: true,success: function(data, status, xhr) {}});