Django跨域请求问题的解决方法示例_Python

Django跨域请求问题的解决方法示例

2021-03-05 00:39画星星高手 Python

这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料，文中介绍的实现方法包括：使用django-cors-headers全局控制、使用JsonP，只能用于Get方法以及在views.py里设置响应头，只能控制单个接口，需要的朋友可以参考下

前言

本文主要给大家介绍了关于Django 跨域请求问题解决的几种方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

几种方法：

使用django-cors-headers全局控制
使用JsonP，只能用于Get方法
在views.py里设置响应头，只能控制单个接口

django-cors-headers

首先安装

1	`pip` `install` `django-cors-headers`

然后在settings.py里配置一番就可以

									INSTALLED_APPS = [

									 ...

									 'corsheaders'，

									 ...

									 ] 

									MIDDLEWARE_CLASSES = (

									 ...

									 'corsheaders.middleware.CorsMiddleware',

									 'django.middleware.common.CommonMiddleware', # 注意顺序

									 ...

									)

									#跨域增加忽略

									CORS_ALLOW_CREDENTIALS = True

									CORS_ORIGIN_ALLOW_ALL = True

									CORS_ORIGIN_WHITELIST = (

									 '*'

									)

									CORS_ALLOW_METHODS = (

									 'DELETE',

									 'GET',

									 'OPTIONS',

									 'PATCH',

									 'POST',

									 'PUT',

									 'VIEW',

									)

									CORS_ALLOW_HEADERS = (

									 'XMLHttpRequest',

									 'X_FILENAME',

									 'accept-encoding',

									 'authorization',

									 'content-type',

									 'dnt',

									 'origin',

									 'user-agent',

									 'x-csrftoken',

									 'x-requested-with',

									 'Pragma',

									)

大功告成了。

JsonP

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

JSONP只能用于GET请求。

什么是JSONP

首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

那么JSONP是什么呢？

首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。

JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？

JSONP原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP具体实现

127.0.0.1:8000中的index.html

									<!DOCTYPE html>

									<html>

									<head>

									<title>GoJSONP</title>

									</head>

									<body>

									$(".jsonp_test").click(function () {

									$.ajax({

									url:"http://127.0.0.1:8008/service/",

									type:"get",

									dataType:"jsonp", // 伪造ajax 基于script

									jsonp: 'callbacks',

									//jsonpCallback:"alex",

									success:function (data) {

									console.log(data)

									}

									})

									})

									<button class='jsop_test'>测试</button>

									</body> </html>

127.0.0.1:8080的views

									import json

									def jsonp_test(request):

									func=request.GET.get("callbacks") #获取请求的callbacks参数

									info={"name":"fuyong","age":18} #定义数据

									return HttpResponse(" ('%s')"%(func,json.dumps(info))) #传json对象

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