前后端跨域问题

文章目录

  • 跨域问题的产生
  • 第一种解决方式(自定义中间件)
  • 第二种解决方式(第三方模块)

跨域问题的产生

同源策略(Same origin policy)是一种约定,它规定了 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同,如果不一致,请求会发送成功,后端会正常响应,但是浏览器会拦截

浏览器对非同源请求返回的结果做了拦截
只要做前后端分离,就会出跨域

# 解决跨域问题
	-CORS :跨域资源共享  咱们讲的方式   向响应头中加数据,允许跨域
    	- 后端代码处理
        - nginx代理
    -JSONP :利用有的标签没有跨域问题 script  img
    -websocket:长链接,不存在跨域
    -前端代理:开发阶段用,上线不用
    
    
# cors如何解决跨域
	-需要服务端支持---》就是服务端再响应头中加数据即可
    
# CORS基本流程
	CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
	简单请求,只发送一次:
    非简单请求发送两次,第一次是OPTIONS预检请求,第二次是真正的请求
# 什么是简单,什么是非简单
#请求方法是以下三种方法之一:
    HEAD
    GET
    POST
# HTTP的头信息不超出以下几种字段:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    
# 请求头中带了 token ,所有请求都是非简单

第一种解决方式(自定义中间件)

# 写一个文件 
### 解决跨域---统一写个中间件--》处理所有跨域
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="*"
            res['Access-Control-Allow-Methods'] = '*'
        response["Access-Control-Allow-Origin"] = "*"
        return response

 #2、添加中间件
    MIDDLEWARE = [  
        ...
        'corsheaders.middleware.CorsMiddleware',
        ...
    ]

第二种解决方式(第三方模块)

# 1、使用pip安装
	pip install django-cors-headers
	
#2、添加到setting的app中
    INSTALLED_APPS = (
        ...
        'corsheaders',
        ...
    )
#3、添加中间件
    MIDDLEWARE = [  
        ...
        'corsheaders.middleware.CorsMiddleware',
        ...
    ]
# 4、setting下面添加下面的配置
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'
)

你可能感兴趣的:(后端)