跨域问题详解

1. 什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。浏览器从一个域名的网页去请求另一个域名的资源时，出现域名、端口、协议不同，都属于跨域。

例如在 127.0.0.1:8000 去请求 127.0.0.1:8888 的资源

注意点: 移动端例如app、小程序不存在该问题

2. 同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现

请求的 url 地址必须与浏览器上的 url 地址处于同域上，也就是域名、端口、协议相同。跨域浏览器会对拦截非同源请求返回的结果（请求已发生），如果浏览器对 javascript 没有同源策略的保护，那么一些重要的机密网站将会很危险

3. CORS（跨域资源共享）简介

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

---

CORS 请求

浏览器将CORS请求分成两类：简单请求（simple request）和 非简单请求（not-so-simple request）

• 简单请求
  同时满足以下两大条件，就属于简单请求。

1. 请求方法是三种方法之一:   HEAD、GET、POST

2. HTTP的头信息不超出以下几种字段: 

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

• 非简单请求
  不同时满足上面两个条件，就属于非简单请求

---

CORS 基本流程

浏览器对这两种请求有不同的处理

• 简单处理

简单请求: 发送一次请求

1. 浏览器发出CORS简单请求，只需要在头信息之中增加一个 Origin 字段。

• 非简单处理

非简单请求: 发送两次请求
在发送数据之前会先发一次请求用于做"预检"，只有"预检"通过后才再发送一次请求用于数据传输

1. 浏览器发出非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
2. 浏览器先询问服务器，当前所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头
   信息字段。
3. 只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

支持跨域

• 简单请求

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

设置的域名为允许访问的域名，或者使用 * 表示任意域名

• 非简单请求

'预检'请求时，允许请求方式则需服务器设置响应头: Access-Control-Request-Method
'预检'请求时，允许请求头则需服务器设置响应头:   Access-Control-Request-Headers

Django 项目中支持 CORS

• 简单请求
  在返回的结果中加入允许信息

def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'lqz'}))
    obj['Access-Control-Allow-Origin']='*'
    # obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

• 非简单请求
  在中间件处理复杂和简单请求

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
        response["Access-Control-Allow-Origin"] = "http://localhost:8080"
        return response

4. Vue 解决跨域

在 vue 项目中配置 vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            '/api': {
                target: ' http://127.0.0.1:8000/', // 配置访问的服务器地址
                pathRewrite: {'^/api': ''},  // 用于将请求中的 /api 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:5000/api/request_url，这样的请求就会出现 404 操作
                // ws: true, // 是否支持 webstocket, 默认是 true
                changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
            },
        },
    }
})

5. Django 项目使用第三方模块跨域

1. 首先需要安装第三方模块，安装完最好确认一下 Django 的版本，以免第三方模块自动更新 Django。

pip3 install django-cors-headers

2. 添加到 setting 的 app 中

INSTALLED_APPS = (
	...
	'corsheaders',
	...
)

3. 添加中间件

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]

4. setting 中添加配置

# CORS_ALLOW_CREDENTIALS = True

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',
)

5. 也可以简略些，如下

CORS_ORIGIN_ALLOW_ALL = True 
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
	'accept-encoding',
    'authorization',
    'content-type',
    'origin',
    'user-agent',
)

需要注意的是，如果要在请求头中携带数据，例如 token ，一定要查看 CORS_ALLOW_HEADERS 中是否已经定义