前端调用DRI后端API出现跨域资源共享(CORS)问题解决办法

目录

    • [1. 引言](#1. 引言)
    • [2. 跨源资源共享和实现方法](#2. 跨源资源共享和实现方法)
    • [3. 在Django项目中配置django-cors-headers库](#3. 在Django项目中配置django-cors-headers库)

1. 引言

在进行后端API开发时,有时会遇到"跨域资源共享 (CORS) 请求...被阻止"的错误,如图1所示。本文讲解如何在使用DRF(Django REST Framework)的后端API开发项目中解决这个问题。

A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .

...

2. 跨源资源共享和实现方法

跨源资源共享(Cross-Origin Resource Sharing)是一种机制,允许在Web浏览器的安全性限制下,从一个域(网站)的客户端向另一个域的服务器发送跨域HTTP请求。

DRF官方给出有关跨域资源共享的两种实现方式:

(1)在 REST 框架中处理 CORS 的最佳方法是在中间件中添加所需的响应标头,这种方式透明地支持 CORS,无需更改视图中的任何行为。

(2)使用django-cors-headers

Cross-Origin Resource Sharing is a mechanism for allowing clients to interact with APIs that are hosted on a different domain. CORS works by requiring the server to include a specific set of headers that allow a browser to determine if and when cross-domain requests should be allowed.

The best way to deal with CORS in REST framework is to add the required response headers in middleware. This ensures that CORS is supported transparently, without having to change any behavior in your views.
Adam Johnson maintains the django-cors-headers package, which is known to work correctly with REST framework APIs.

3. 在Django项目中配置django-cors-headers库

(1)使用pip在环境中安装django-cors-headers库:

shell 复制代码
python -m pip install django-cors-headers

(2)在setting.py文件的INSTALLED_APPS中添加"corsheaders"

python 复制代码
INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

(3)在setting.py文件的MIDDLEWARE中添加中间件类用于监听响应:

python 复制代码
MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]

(4)在setting.py文件中添加变量CORS_ALLOWED_ORIGINS并设置为True.

python 复制代码
CORS_ALLOWED_ORIGINS = True

以上步骤完成后,前端调用后端DRF API时所出现的CORS错误就被消除了。

Reference

AJAX, CSRF & CORS - Django REST framework
GitHub - adamchainz/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)

相关推荐
北海-cherish5 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist7 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师8 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang8 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_8 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含8 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端8 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友8 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端