圆月山庄资源网

Python的Django应用程序解决AJAX跨域访问问题的方法
脚本专栏 2024/11/8 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

引子
使用Django在服务器端写了一个API，返回一个JSON数据。使用Ajax调用该API：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <title>test</title>
</head>
<body>
<button onclick="showPersonInfo()">点我获取数据</button>
</body>
<script src="/UploadFiles/2021-04-08/jquery.js">


但是，Chrome浏览器提示错误：







No 'Access-Control-Allow-Origin' header is present on the requested resource.






经过一番Google发现这个问题是——CORS导致的。


什么是CORS？

CORS（跨域资源共享，Cross-Origin Resource Sharing）是一种跨域访问的机制，可以让Ajax实现跨域访问。

其实，在服务器的response header中，加入“Access-Control-Allow-Origin: *”即可支持CORS，非常的简单，apache/nginx等怎么配置，见参考文档。

举个例子：


    
  
  • API部署在DomainA上；
    • 
  
  • Ajax文件部署在DomainB上，Ajax文件会向API发送请求，返回数据；
    • 
  
  • 用户通过DomainC访问DomainB的Ajax文件，请求数据
    • 



以上过程就发生了跨域访问。如果直接使用Ajax来请求就会失败，就像Chrome提示的：





No 'Access-Control-Allow-Origin' header is present on the requested resource.







如何解决Ajax跨域访问问题？

解决跨域问题，有两个方法：1.使用jsonp 2.使CORS生效

使用jsonp方法，需要让服务器端放回jsonp格式的response，如Django可以加jsonp相关的decorator，如：https://coderwall.com/p/k8vb_a/returning-json-jsonp-from-a-django-view-with-a-little-decorator-help由于我不太喜欢这种方式，所以这里略过了，可看后面的参考资料。

使用CORS：这个用起来比较方便，现在大多数浏览器都支持了，且我web服务器完全开放给别人调用，所以比较推荐CORS。

1.使用JSONP

使用Ajax获取json数据时，存在跨域的限制。不过，在Web页面上调用js的script脚本文件时却不受跨域的影响，JSONP就是利用这个来实现跨域的传输。因此，我们需要将Ajax调用中的dataType从JSON改为JSONP（相应的API也需要支持JSONP）格式。

JSONP只能用于GET请求。


2.直接修改Django中的views.py文件

修改views.py中对应API的实现函数，允许其他域通过Ajax请求数据：







def myview(_request):
  response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
  response["Access-Control-Allow-Origin"] = "*"
  response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
  response["Access-Control-Max-Age"] = "1000"
  response["Access-Control-Allow-Headers"] = "*"
  return response






3.安装django-cors-headers

这里还有一各发现！在Django中，有人开发了CORS-header的middleware，只在settings.py中做一些简单的配置即可，见：https://github.com/ottoyiu/django-cors-headers/现在用起来服务器端完全开放，开启CORS，没有跨域烦恼，真爽！~

安装django-cors-headers：





pip install django-cors-headers






在settings.py中增加：





INSTALLED_APPS = (
  ...
  'corsheaders',
  ...
)

...

MIDDLEWARE_CLASSES = (
  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
  ...
)







可以配置允许跨域访问的白名单或者直接设置为允许所有的跨域访问，具体的配置可以看看他们的github页说明。
标签：
Django,AJAX
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接