django解决跨域请求的问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了django解决跨域请求的问题相关的知识，希望对你有一定的参考价值。

解决方案

1.安装django-cors-headers

pip install django-cors-headers

2.配置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',
)

OK！问题解决！


其他解决方案

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': 'value2'}))
    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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h1>server&#45;&#45;&#45;&#45;002</h1>-->
<input type="button" onclick='jsonp2()' value="发送JSONP请求"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    function jsonp2() {
        $.ajax({
            // url: 'http://121.201.68.21:8080/jia/zhifu.php?jsonp=?',
 url: 'http://127.0.0.1:8000/my_view/',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data);

                $('body').append(data.key+'-'+data.key2+' ')

            }
        })
    }


</script>
</body>
</html>




技术分享图片

以上是关于django解决跨域请求的问题的主要内容，如果未能解决你的问题，请参考以下文章

django解决跨域请求的问题

前后端分离，解决跨域问题及django的csrf跨站请求保护

解决跨域问题以及Django中POST传递参数错误

Django前后端分离跨域请求问题

Cors跨域请求问题

django解决ajax跨域请求