CORS/Cross-Origin Resource Sharing/跨域资源共享/HTTP访问控制
解决CORS问题，短期开发阶段方案如下，正常来说还是要设置好白名单和token等等。
python-django (django-cors-headers)：
代码语言：python代码运行次数：0复制# pip install django-cors-headers
# settings.py
INSTALLED_APPS = (... 'corsheaders', ...)
MIDDLEWARE = [... 'corsheaders.middleware.CorsMiddleware', ...]
CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中，后端是否支持对cookie的操作
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
# 'http://127.0.0.1:8000',
# 'http://localhost:8000',
# ) # 凡是出现在白名单中的域名，都可以访问后端接口https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
代码语言：javascript复制// axios/requests parameters
// config.headers['X-Token'] = getToken()
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'https://blog.csdn.net/Zhou07182423/article/details/87881484
同协议 同域名 同端口 = 同源
使用额外的HTTP头来通知浏览器让运行在一个origin (domain)上，准许访问来自不同源服务器上的指定的资源
CORS需要浏览器和服务器同时支持，目前浏览器基本都支持该功能(IE>10)
整个CORS通信过程，都是浏览器自动完成，不需要用户参与
对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样
浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
A mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
常见的头信息包括：
Request Headers：
Origin:
Access-Control-Request-Method:
Access-Control-Request-Headers:Response Headers：
<!-- 1. 允许向该服务器提交请求的URI -->
Access-Control-Allow-Origin: <origin> | *
<!-- 2. 浏览器允许访问的服务器的头信息的白名单 -->
Access-Control-Expose-Headers: ..., ...
<!-- 3. 请求有效期（单位：秒）： -->
Access-Control-Max-Age: <seconds>
<!-- 4. 允许的请求方法： -->
Access-Control-Allow-Methods
<!-- 5. 实际的请求中,可以使用的自定义HTTP请求头 -->
Access-Control-Allow-Headers
<!-- 6. 告知客户端,当请求XHR的withCredientials属性是true的时候,响应是否可以被得到。 -->
<!-- 从而使得下一次请求时，上一次的Cookies可以随着请求发送。 -->
Access-Control-Allow-Credentials：
Access-Control-Allow-Origin 方案支持两种： 1) 简单的请求(不支持Put，Delete)： Request header包含：Origin: http://test.nuomi.com Response header包含：Access-Control-Allow-Origin: http://test.nuomi.com 2) Preflight方式的请求： 代码中虽然请求一次，但是实际会请求两次：第一次发送OPTION方法，询问对方是否支持我方某种请求方式 如果第一次进过允许，那么发送第二次请求；否则第二次不再发送； 第一次请求： Request header包括：Origin，Access-Control-Request-Method，Access-Control-Request-Headers（optional）， Request header包括：Access-Control-Allow-Origin，Access-Control-Allow-Methods，Access-Control-Allow-Headers 第二次请求： 直接用代码中的方法发送（PUT、DELETE），然后得到结果；
代码语言：html复制<!-- request -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
axios
.get('http://127.0.0.1:8000')
.then(response => console.log(response['data']))
.catch((e) => { console.log('Fail to load'); });
</script>
