6、跨域问题解决

一、什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

二、跨域问题以及出现的原因？

跨域问题就是浏览器不允许去不同的url地址获取数据，这涉及到浏览器的一个安全策略，叫做同源策略，所以跨域问题通常只会出现在PC端上的前后端分离项目

浏览器同源策略：它是浏览器的基本安全策略，请求的url地址必须与浏览器上的url地址处于同域上，也就是说域名,端口,协议必须相同，才能去获取资源

三、如何解决跨域问题？

CORS(跨域资源共享)，是一种后端技术，通俗来讲需要往服务端在响应头中加入一下东西，允许跨域

1、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
    
# 凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

# 如果Content-Type是json格式，都是非简单请求
# 简单请求只发一次，非简单请求发送两次，第一次是OPTIONS预检请求，第二次是真正的请求

四、后端使用CORS处理跨域问题

# 简单请求,支持跨域
-服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

# 非简单请求支持跨域
-在响应头中设置：Access-Control-Allow-Methods='*'
-在响应头中设置：Access-Control-Request-Headers='*'

1、手动处理

自己手动处理跨域，跟web框架无关。任何web框架都可以使用这种方式

# 自己创建个文件写入下面代码
class CorsMiddle(MiddlewareMixin):
	def process_response(self, request, response):
		if request.method == 'OPTIONS':
			response['Access-Control-Allow-Headers'] = '*'
            response['Access-Control-Allow-Methods'] = '*'
        # 在响应头中加入Access-Control-Allow-Origin,处理了简单请求
        response['Access-Control-Allow-Origin'] = '*'
        # 处理非简单请求
        return response

    
# 将上面的文件在中间件中配置

2、第三方处理

使用第三方（django框架独有的），解决跨域

# 第一步：安装
pip install django-cors-headers 	

# 第二步：在app中注册
INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )

# 第三步：在中间件中加入
    MIDDLEWARE = [  
        ...
        'corsheaders.middleware.CorsMiddleware',
        ...
    ]
    
# 第四步：在配置文件中配置
    CORS_ORIGIN_ALLOW_ALL = True
    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'
    )