Javascript跨域访问资源

Javascript跨域访问资源

javascript字符串



WordPress XSS越权漏洞新路线

Javascript跨域访问资源

Django开发的API，在浏览器里可以正常访问，但在javascript里用GET访问，却报错如下：

No 'Access-Control-Allow-Origin' header is present on the requested resource.
查了一下，其实这个问题水还不浅，下面来分析一下。

首先得知道，浏览器规定了一个“同源策略”(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(JS)在没明确授权的情况下，不能读写对方的资源。这是Netscape提出的一个著名的安全策略，所有能跑JS的浏览器都遵守这个策略[1]。

就是说脚本只能向加载它的站点发送HTTP请求。浏览器能GET到(直接在浏览器地址栏里访问)的资源，脚本不一定能GET到。举个例子，比如通过这个URL（http://tb2.bdstatic.com/tb/static-spage/widget/member_rank/member_rank_z_a0f387f.pnG），可以访问到百度的一张图片。你把这个URL用浏览器直接访问，或者写在HTML的image元素的src里，都是可以正常访问到这张图片。但用JS来GET，就会报错。
注意这个策略是浏览器策略，如果在其它非浏览器运行的脚本中，比如python，还是能GET到百度这个图片的。

这个策略是一个安全策略，没有它，就会发生cookie劫持（A站点获取B站点的cookie）一类的安全问题。但这个策略规定的那么死，A站点的JS又不能调用B开发的API，那API就没啥用了。如果一个站点不能访问另一站点的资源，互联网上的资源冗余得有多大！

所以，为了不让咱们白开发API，出现了CORS（跨域资源共享）。CORS是一种机制，只要服务器遵守这种机制，就能实现A站点的脚本访问B站点的资源，上面那个百度的图片就能被我们本地的JS脚本GET到了。

CORS机制规定，服务器要在HTTP头中添加Access-Control-Allow-Origin， Access-Control-Allow-Methods，来限制其他站点和可以访问资源的方法。再看看最初提到的那个报错，不就是服务器没有配置Access-Control-Allow-Origin么。

将支持CORS的站点地址添加到源服务器Access-Control-Allow-Origin，则该站点的JS，就能访问到源服务器中的资源。
回到Django，利用Django的中间件，有更简单的方法能满足CORS机制，详见这里。

1. 在Django项目的跟目录（manage.py所在目录）下

pip install django-cors-headers

2. 在settings.py中配置CORS_ORIGIN_ALLOW_ALL，则允许所有站点来访问资源

INSTALLED_APPS = (

...

'corsheaders',

...

)

MIDDLEWARE_CLASSES = (

...

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware',

...

)

CORS_ORIGIN_ALLOW_ALL = True
开放了所有站点来访问资源，在HTTP头中，Access-Control-Allow-Origin被设置为*。 允许所有站点访问资源的做法并不安全，比如黑客写一段无穷个GET来访问资源的代码，就可能导致服务器瘫痪，所以还可以设置白名单：

CORS_ORIGIN_WHITELIST = (

'localhost:8083',

'hostname.example.com'

)

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题:
浏览器、Java、服务器、Django、HTML、中间件、百度、SSE、其实、互联网、

为您推荐

分页：12

转载请注明

本文标题：Javascript跨域访问资源

本站链接：http://www.codesec.net/view/185804.html