Javascript跨域访问资源

墨蓝 2022-07-15 15:21 202阅读 0赞

# Javascript跨域访问资源 #

[![上一篇][toolbar_previous.gif]javascript字符串][toolbar_previous.gif_javascript]

[![下一篇][toolbar_next.gif]WordPress XSS越权漏洞新路线][toolbar_next.gif_WordPress XSS]

![未加星标][unstarred.gif]

## 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被设置为\*。 允许所有站点访问资源的做法并不安全，比如[黑客][Link 1]写一段无穷个GET来访问资源的代码，就可能导致服务器瘫痪，所以还可以设置白名单：

CORS\_ORIGIN\_WHITELIST = (  
'localhost:8083',  
'hostname.example.com'  
)

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

主题: [ 浏览器][Link 2]、 [Java][]、 [服务器][Link 3]、 [Django][]、 [HTML][]、 [中间件][Link 4]、 [百度][Link 5]、 [SSE][]、 [其实][Link 6]、 [互联网][Link 7]、

为您推荐

**分页：** [1][toolbar_next.gif_WordPress XSS] [2][toolbar_previous.gif_javascript]

转载请注明  
本文标题： [Javascript跨域访问资源][Javascript]  
本站链接： [http://www.codesec.net/view/185804.html][Javascript]

[toolbar_previous.gif]: http://pic1.codesec.net/images/toolbar_previous.gif
[toolbar_previous.gif_javascript]: http://www.codesec.net/view/185803.html
[toolbar_next.gif]: http://pic1.codesec.net/images/toolbar_next.gif
[toolbar_next.gif_WordPress XSS]: http://www.codesec.net/view/185805.html
[unstarred.gif]: http://pic1.codesec.net/images/unstarred.gif
[javascript]: http://www.codesec.net/list/6/
[python]: http://www.codesec.net/list/5/
[Link 1]: http://www.codesec.net/
[Link 2]: http://www.codesec.net/tags/87329.html
[Java]: http://www.codesec.net/tags/87420.html
[Link 3]: http://www.codesec.net/tags/87345.html
[Django]: http://www.codesec.net/tags/87417.html
[HTML]: http://www.codesec.net/tags/87445.html
[Link 4]: http://www.codesec.net/tags/87328.html
[Link 5]: http://www.codesec.net/tags/8031.html
[SSE]: http://www.codesec.net/tags/6655.html
[Link 6]: http://www.codesec.net/tags/21866.html
[Link 7]: http://www.codesec.net/tags/54856.html
[Javascript]: http://www.codesec.net/view/185804.html