前后端分离-跨域问题详解

一、跨域问题详解

什么是跨域问题：

跨域问题只会出现在前后端分离项目中，在前后端分离项目中，前端发送ajax请求到后端会跨域问题拦截，导致这个问题的原因是“同源策略”

什么是同源策略：

前端请求的url地址必须与浏览器上的url地址处于相同域上，也就是域名、端口、协议相同

-发送ajax请求的地址，必须跟浏览器上的url地址处于同域上 
	# 域 [域名，地址，端口，协议]
-请求成功，数据库返回，但是浏览器拦截

# 补充：浏览器中输入域名，没有加端口
    -www.baidu.com---->dns--->解析成地址  192.168.2.3----》没有加端口，默认是80
    -dns解析，先找本地的host文件
    -可以修改本地的host做映射

解决同源策略的方式：

• 方式一：CORS 后端代码控制（本次所讲解）
• 方式二：Nginx反向代理 （常用）
• 方式三：搭建Node代理服务器
• 方式四：JSONP 很老，不会用了，只能发get请求

1、CORS解决跨域问题

简介：

cors（跨域资源共享），第三方模块，后端技术，通过在响应头中加入固定的头，来解决跨域问题

cors基本流程：

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

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

什么是简单请求和非简单请求：

符合以下条件的请求就是简单请求，反之就是非简单请求

（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
    
    
 # 演示简单和非简单请求
    -如果是简单，直接发送真正的请求
    -如果是非简单，先发送options，如果允许，再发真正的请求

cors解决跨域问题：

# 第一步：安装
	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',
)

2、自己编写代码解决跨域问题

思路：

• 当请求进入django时，拦截请求进行判断
• 如果是简单请求直接在响应头中加入"Access-Control-Allow-Origin"
  • 指是否允许该域名访问
• 如果是非简请求，在响应头中加入"Access-Control-Allow-Headers"
  • 指是否允许在响应头中添加的字段
• 将编写的代码注册成中间件，这样就不会出现跨域问题

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":  # 解决非简单请求的请求头
            #可以加*
            response["Access-Control-Allow-Headers"]="*"

        # 允许前端的地址，所有请求头允许
        response["Access-Control-Allow-Origin"] = "*"
        return response