解决浏览器跨域问题

解决浏览器跨域问题

前后端分离的项目中，由于前端所运行的域名地址与后端常常不一致，在发送ajax时，我们常常会碰到跨域问题。

这是浏览器制定的安全策略(同源策略Same origin policy)，浏览器跨域名请求数据时，需要响应数据中包含对应的响应头表示同意这个异端请求拿取我们服务端的数据。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

两种请求分类

1. 简单请求：属于HEAD\GET\POST请求的一种，并且头的信息不超过以下几种：

   Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
   

   简单请求只要求响应头信息之中增加一个Origin字段。

2. 非简单请求：其余的都算非简单请求。
   要求发送两次请求，第一次请求是OPTIONS请求，其目的是preflight预检。

简单粗暴的加响应头

在遇到跨域响应被浏览器检查时，会抛异常告诉我们需要加一些响应头，那么常用解决跨域的响应头是使用以下几个：

 headers={
	 'Access-Control-Allow-Origin': '*',
	 'Access-Control-Allow-Headers': 'Content-Type',   # 用axios发送请求时可能要添加这个头
	 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS' # 一些请求方式，不确定是否有用
}

django项目解决方案

目前成熟的主流方案，使用django-cors-headers包：

pip install django-cors-headers

在Django的设置文件中添加corsheaders应用程序和中间件：

# 注册软件
INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

# 注册中间件
MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

• 添加以下配置项以允许所有跨域请求：
  CORS_ORIGIN_ALLOW_ALL = True

• 只允许指定的源访问跨域请求：
  将配置项改为False：CORS_ORIGIN_ALLOW_ALL = False
  并添加以下配置项：

  # 允许跨域的域名白名单
  CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
    'https://example.com'
  ]
  # 配置允许的请求方式
  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',
    'token'
  )