CORS Cross Origin Resource Sharing

CORS/Cross-Origin Resource Sharing/跨域资源共享/HTTP访问控制

解决CORS问题，短期开发阶段方案如下，正常来说还是要设置好白名单和token等等。

python-django (django-cors-headers)：

# 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

// 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），然后得到结果；

<!-- 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>