一招彻底解决Django跨域请求问题

一招彻底解决Django跨域请求问题

跨域报错：Access to XMLHttpRequest at ‘http://127.0.0.1:8000/’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

1、为什么会出现跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

3、解决跨域

在后端发送请求时， 带上相应的请求头

在b.com中设置一个响应头就可以解决问题。
from django.shortcuts import render, HttpResponse

def book(request):
	result = HttpResponse( ' bbbbbbb ' )
    
	result['Access-Contro1-Allow-origin'] = "*"  # 设置请求头
	return result

或者在配置文件中全局配置

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ] 

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', # 注意顺序
    ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True  # 允许携带Cookie
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',
)

Nginx配置

注意：真正项目上线后，使用CORS解决跨域时 在nginx 上设置响应头即可。
如果使用了Nginx，则配置如下规则：

sudo vim /usr/local/nginx/conf/nginx.conf

 location / {
     proxy_pass 127.0.0.1:8000/;
}

本文参考

https://blog.csdn.net/apple9005/article/details/54427902
https://blog.csdn.net/qq_16687863/article/details/98595987

（完！）