Django前后端分离跨域请求问题

一、问题背景

  之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为。针对跨域问题,可以有下面的解决方式:

  • JSONP方式
  • 自定义中间件,设置响应头
  • 使用django-cors-headers包

二、解决方式

(一)自定义中间件

  JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a>、<img>、<script>等标签的src属性,从而实现跨域请求,但是这种方法只支持GET的请求方式,这里暂不做过多讨论,主要说自定义中间件以及利用django-cors-headers包来实现跨域。

1、自定义中间件

class MiddlewareMixin(object):
    def __init__(self, get_response=None):
        self.get_response = get_response
        super(MiddlewareMixin, self).__init__()

    def __call__(self, request):
        response = None
        if hasattr(self, ‘process_request‘):
            response = self.process_request(request)
        if not response:
            response = self.get_response(request)
        if hasattr(self, ‘process_response‘):
            response = self.process_response(request, response)
        return response

class CORSMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
        # 添加响应头
        # 允许相应的域名来访问,多个域名中间以逗号隔开,如果全部可使用‘*‘
        response[‘Access-Control-Allow-Origin‘] = "*"
        # 允许携带的请求头,多个中间以逗号隔开
        response[‘Access-Control-Allow-Headers‘] = "Content-Type"
        # 允许发送的请求方式
        response[‘Access-Control-Allow-Methods‘] = "DELETE,PUT"
        return response

2、注册中间件(在settings文件中注册)

MIDDLEWARE = [
    ‘django.middleware.security.SecurityMiddleware‘,
    ‘django.contrib.sessions.middleware.SessionMiddleware‘,
     ...
     ...
    ‘crm.utils.cors.CORSMiddleware‘ #跨域中间件
]

(二)CORS(Cross-Origin Resource Sharing)

1、安装django-cors-headers包

pip install django-cors-headers #在对应的开发环境中安装

2、修改settings文件

  • 注册应用
# Application definition

INSTALLED_APPS = [
    ‘django.contrib.admin‘,
    ...‘django.contrib.staticfiles‘,
    ‘corsheaders‘,#放在新建应用之前
    ‘rest_framework‘,
    ...‘crm‘
]
  • 中间件注册
MIDDLEWARE = [
    ‘django.middleware.security.SecurityMiddleware‘,
    ‘django.contrib.sessions.middleware.SessionMiddleware‘,
    ‘corsheaders.middleware.CorsMiddleware‘,  # 注意顺序,放在此处
    ‘django.middleware.common.CommonMiddleware‘,
     ...
]
  • 其它设置
CORS_ORIGIN_ALLOW_ALL = True  #允许所有的请求,或者设置CORS_ORIGIN_WHITELIST,二选一
CORS_ALLOW_HEADERS = (‘*‘) #允许所有的请求头
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie,前端需要携带cookies访问后端时,需要设置withCredentials: true

这样就可以进行跨域使用了。

  但是大多数站点将需要利用Django提供的跨站点请求伪造保护。CORS和CSRF是分开的,并且Django无法使用您的CORS配置免除网站Referer对安全请求所做的检查。做到这一点的方法是使用其CSRF_TRUSTED_ORIGINS设置。

3、CSRF整合

#1、CSRF_TRUSTED_ORIGINS  设置
CORS_ORIGIN_WHITELIST  = [
     ‘ http://read.only.com ‘,
     ‘ http://change.allowed.com ‘,
] #不需要CORS_ORIGIN_ALLOW_ALL=True的设置

CSRF_TRUSTED_ORIGINS  = [
     ‘ change.allowed.com ‘,
]

#2、中间件设置
#启用此功能在django.middleware.csrf.CsrfViewMiddleware后,还应添加#corsheaders.middleware.CorsPostCsrfMiddleware
MIDDLEWARE_CLASSES  = [
     ...
    ‘ corsheaders.middleware.CorsMiddleware ‘,
     ...
    ‘ django.middleware.csrf.CsrfViewMiddleware ‘,
     ‘corsheaders.middleware.CorsPostCsrfMiddleware ‘,
     ...
]

详情参考官方文档https://github.com/adamchainz/django-cors-headers

原文地址:https://www.cnblogs.com/shenjianping/p/11718925.html

时间: 2024-11-03 21:09:00

Django前后端分离跨域请求问题的相关文章

关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个"浏览器预请求"不通过. 浏览器为什么会自动发送"预请求"?请看以面连接 https://blog.csdn.net/charleslei/article/details/51906635 那么解决办法无非就是尽量避免发送"预请求". 后来经过反复测试发现"预请求"可以通过设置Access-Control-Max-Age

前后端分离跨域问题解决方案

问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111端口(我自己设置的)...导致前端请求的ajax到后台会产生跨域问题...然后自己试了试发现有2种办法都可以解决. 利用SpringMVC @CrossOrigin注解 1 package com.labofjet.system.controller; 2 3 import org.slf4j.Lo

node与vue结合的前后端分离跨域问题

第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defaults.withCredentials=true Vue.prototype.$axios = axios; main.js全部配置如下: import Vue from 'vue' import App from './App' impor

llaravel 前后端分离跨域问题

使用 laravel-cors 实现 Laravel 的跨域配置 一.需求 一个项目需要进行前端跨域,不适用 jsonp. 因此需要进行 cors 的设置. 最开始的时候,我使用的是路由中间件的方式,但是发现中间件不起作用. // 路由中间件 public function handle($request, Closure $next) { $response = $next($request); $response->header('Access-Control-Allow-Origin',

nginx配置反向代理解决前后端分离跨域问题

摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen 80; server_name your.domain.name; location / { # 把跟路径下的请求转发给前端工具链(如gulp)打开的开发服务器 # 如果是产品环境,则使用root等指令配置为静态文件服务器 proxy_pass http://localhost:5000/; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器

springboot+angular4前后端分离 跨域问题

springboot中新增一个过滤器如下: package com.rtpksps.kss.config;import org.springframework.stereotype.Component;import javax.servlet.*;import javax.servlet.http.HttpServletResponse;import java.io.IOException; /** * @author Administrator * @title: OriginFilter *

springboot前后端分离跨域

@Configurationpublic class CrossConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET"

前后端分离跨服务器文件上传-Java SpringMVC版

近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码. 一.Tomcat服务器部分 1.Tomcat服务器 单独复制一份Tomcat,用来作为文件服务器 1.1 xml文件: 需要在该Tomcat的conf目录下的web.xml文件的大概100行添加如下部分: 1.2 server.xml文件: 需要在该Tomcat的conf目录下的server.xml文件做一些端口的修改 1.3 Tomcat下建立文件夹 在该T

django 前后端分离,后端接口实现

博客篇我们使用的是前后端不分离的方式进行实现,前后端不分离实现方式,主要用于小型的项目,且一个人就可以搞定所有,但是中大型的应用还是用的前后端分离的方式进行的 前后端分离方式后台主要给前端提供接口,前端JS调用后台的接口,根据接口定义的传参进行传参,得到返回值,然后展现在页面上,或者对数据进行了操作,把操作后的数据传给后端,后端进行数据的更新等 下面的例子我们主要从基本的增删改查进行设计后台接口部分 一.准备工作 1.modles.py文件中,创建student表,用于进行增删改查 class