CORS跨域请求原因和解决办法

CORS跨域请求

1. 同源地址：

2. 两个url：协议（http）、域名（127.0.0.1）、端口（8000）完全一致，这样的地址就叫同源地址，否则就叫非同源地址。

3. 注：如果有两个网址：
   http：www.buidu.com（解析后地址为：http127.0.0.1:8000)
   http：127.0.0.1:8000这两个同源吗吗？
   如果两个域名不同，解析后的IP相同，这也是非同源，所以这里就是一个很大的坑

4. 跨域请求：

• 当浏览器发起请求时，如果源请求页面地址和被请求地址不是同源地址，那么这个请求就是跨域请求。

1. CORS跨域请求限制

• 浏览器在发起异步跨域请求时，默认会有CORS跨域请求限制
  • 浏览器在请求头中携带Origin请求头，表明源请求地址：
    Origin: 源请求地址
  • 服务器在返回响应时，如果允许源地址对其进行跨域请求，需要在响应头中携带Access-Control-Allow-Origin响应头：
    Access-Control-Allow-Origin: 源请求地址
  • 浏览器在收到响应时，如果发现响应头中没有Access-Control-Allow-Origin响应头，浏览器会直接将请求驳回，产生CORS跨域请求限制。
  • 注：跨域请求不一定有异步请求，还有同步，浏览器的限制只对异步请求。

1. CORS跨域请求设置

• 项目中前端服务器与后端服务器分处不同的域名，需要为后端服务器添加跨域访问的支持。
  Django项目中可以使用django-cors-headers扩展进行跨域请求设置。

  1. 安装
     pip install django-cors-headers

  CORS扩展参考文档

  1. 注册应用
     INSTALLED_APPS = (
     …
     ‘corsheaders’,
     …
     )

  2. 注册中间件
     MIDDLEWARE = [
     # 注意：此中间件添加到中间件的第一个
     ‘corsheaders.middleware.CorsMiddleware’,
     …
     ]

  3. 添加跨域请求白名单

     CORS_ORIGIN_WHITELIST = (
     # 备注：允许源地址http://127.0.0.1:8080向当前API服务器发起跨域请求
     ‘http://127.0.0.1:8080’,
     )

     CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

  • 凡是出现在白名单中的域名，都可以访问后端接口
  • CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否支持对cookie的操作。