vue+django 开发环境跨域前后端联调配置

vue环境是127.0.0.1:8080,django环境是127.0.0.1:8000 要解决url相对路径和Axios跨域权限问题。

注意:程序发起了一个 POST 请求,但请求的 URL 没有以斜杠结尾。Django 默认设置是无法执行重定向到带斜杠 URL的。例如:url = 'http://127.0.0.1:8000/login/' 成功,但url = 'http://127.0.0.1:8000/login'请求会失败。

虽然可以通过设置 APPEND_SLASHFalse忽略这种差异,但请注意,这样做可能会影响其他部分的 URL 处理,因此请谨慎使用。

另:如果要解决跨域cookies的问题,还要配置(参考:解决跨域设置cookie问题)

【以下这些配置都是为了联调,上生产环境时应该去掉】

前端配置 (vue.config.js 和 main.js)

在前端项目中,您需要修改 vue.config.js 文件,将 proxy 属性设置为 { target: "http://localhost:8000", changeOrigin: true }。这样,当前端向后端发送请求时,将会被代理到 http://localhost:8000 端口。

  devServer: {host: '127.0.0.1',port: 8080,proxy: {'/api': {                              //对路径是'/api'开头的请求进行代理target: 'http://127.0.0.1:8000',   // 后台接口域名ws: false,                         //如果要代理 websockets,配置这个参数// secure: false,                  // 如果是https接口,需要配置这个参数changeOrigin: true,  //是否跨域pathRewrite:{			                //如果联调的后端url也是/api开头,pathRewrite这段可以删掉。(一般是因为main.js中增加了axios.defaults.baseURL = '/api' 这行才需要pathRewrite)'^/api': '/'}}}}

 main.js配置BaseUrl

import Vue from 'vue'
import App from './App'
import Axios from 'axios'Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'Vue.config.productionTip = false

 关键代码是:Axios.defaults.baseURL = '/api',这样每次发送请求都会带一个/api的前缀。

后端配置 (安装插件 django-cors-headers )

 本不想额外装这个插件,但百度查到的多种解决方案,实践下来只有安装插件的方案配置成功。(如果不安装插件,需要逐个处理 Preflight 请求等问题 def xxx(request): if request.method == 'OPTIONS':)

step1:

pip install django-cors-headers

step2:settings.py中配置三项

INSTALLED_APPS  =  [ ... ... 'corsheaders' ,
]MIDDLEWARE  =  ['corsheaders.middleware.CorsMiddleware' ,... 'django.middleware.common.CommonMiddleware' ,# 这行原配置已经有,在这里仅是提示Corsmidlware要放在这句之前... 
]# 注意:应将Corsmidlware放置在尽可能高的位置,尤其是要放在能够生成响应的中间件之前,比如Django的CommonMiddleware或Whitenoise middleware。如果不是放在这些响应中间件之前,它可能无法将CORS头添加到这些响应中。
#另外,如果您使用CORS_REPLACE_HTTPS_REFERER,它应该放在Django的CsrfViewMiddleware之前。CORS_ALLOW_ALL_ORIGINS = True  # 注意,这里将CORS_ALLOW_ALL_ORIGINS设置为True是为了允许所有的跨域请求,这在开发阶段可能很方便,但在生产环境中应该谨慎使用。

---------------

前端运行在localhost:8080上,后端运行在 localhost:8000 上,虽然端口不同,但在同一个主机(localhost)上,对于cookies,浏览器通常会将它们视为相同的源(Same Origin),不需要显式设置 cookieDomainRewrite。
 

但若涉不同主机cookie,还需配置:

devServer: {proxy: {'/api': {target: 'http://localhost:8000',ws: true,changeOrigin: true,cookieDomainRewrite: 'localhost',}}}

 官方文档见 https://github.com/chimurai/http-proxy-middleware

翻译 https://blog.csdn.net/xmloveth/article/details/56847456

如果生产环境也涉及跨域,则需要 axios.defaults.withCredentials = true

后端

# 改为True即为可跨域设置Cookie
CORS_ALLOW_CREDENTIALS = True# 这里有一个需要注意的点
# chrome升级到80版本之后,cookie的SameSite属性默认值由None变为Lax
# 也就是说允许同站点跨域 不同站点需要修改配置为 None(需要将Secure设置为True)
# 需要前端与后端部署在统一服务器下才可进行跨域cookie设置# 总结:需要设置 samesite = none、secure = True(代表安全环境 需要 localhost 或 HTTPS)才可跨站点设置cookie

后端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/206231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

远传智能水表一般应用于哪些场景?

远传智能水表是一种在水表领域应用广泛的创新技术,它利用物联网和无线通信技术使水表具备了远程监测和数据传输的能力。这种智能水表的应用场景多种多样,可适用于各个领域和环境。那么,远传智能水表一般应用于哪些场景呢? 首先&am…

ElasticSearch之Refresh API

使用本方法,显式的执行refresh操作。 默认情况下,ElasticSearch启动后台任务,周期性执行refresh操作,周期使用参数index.refresh_interval控制。 本方法触发的refresh为同步操作,运行完毕之后才会返回任务的执行结果。…

CPU密集型和IO密集型任务

1. CPU密集型任务 1.1 定义 CPU密集型任务是指在任务执行过程中,主要由计算操作占用大部分时间,而不是等待外部资源的任务类型。 1.2 特点 计算密集性: 需要大量的数学运算、逻辑判断和数据处理。高CPU利用率: 任务执行期间&a…

9.关于Java的程序设计-基于Springboot的家政平台管理系统设计与实现

摘要 随着社会的进步和生活水平的提高,家政服务作为一种重要的生活服务方式逐渐受到人们的关注。本研究基于Spring Boot框架,设计并实现了一种家政平台管理系统,旨在提供一个便捷高效的家政服务管理解决方案。系统涵盖了用户注册登录、家政服…

mybatis数据输出-map类型输出

1、建库建表 create table emp (empNo varchar(10) null,empName varchar(100) null,sal int null,deptno varchar(10) null ); 2、pom.xml <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis<…

氧化性低密度脂蛋白抗体原料——博迈伦生物

氧化性低密度脂蛋白抗体原料——博迈伦生物 引言 氧化性低密度脂蛋白&#xff08;oxLDL&#xff09;是动脉粥样硬化等心血管疾病的关键因素之一。抗体作为诊断和研究工具&#xff0c;在oxLDL的检测和相关疾病的研究中发挥着重要作用。本文将深入探讨氧化性低密度脂蛋白抗体原料…

Elasticsearch 8.9 flush刷新缓存中的数据到磁盘源码

一、相关API的handler1、接收HTTP请求的hander2、每一个数据节点(node)执行分片刷新的action是TransportShardFlushAction 二、对indexShard执行刷新请求1、首先获取读锁&#xff0c;再获取刷新锁&#xff0c;如果获取不到根据参数决定是否直接返回还是等待2、在刷新之后transl…

芯知识 | 如何选择合适的单片机语音芯片?

随着科技的飞速发展&#xff0c;单片机语音芯片已经广泛应用于各个领域。然而&#xff0c;在众多的芯片产品中&#xff0c;如何选择合适的单片机语音芯片成为了一个重要的问题。本文将为您提供一些建议&#xff0c;助您找到最适合您需求的单片机语音芯片。 一、明确需求 在选…

Android Audio实战——音频链路分析(二十五)

在 Android 系统的开发过程当中,音频异常问题通常有如下几类:无声、调节不了声音、爆音、声音卡顿和声音效果异常(忽大忽小,低音缺失等)等。尤其声音效果这部分问题通常从日志上信息量较少,相对难定位根因。想要分析此类问题,便需要对声音传输链路有一定的了解,能够在链…

AI发展下服务器的选择非常重要

在AI发展下&#xff0c;服务器的选择非常重要。以下是一些选择服务器时需要考虑的因素&#xff1a; 1. 计算能力&#xff1a;AI需要大量的计算资源来进行训练和推理。因此&#xff0c;选择具有强大计算能力的服务器是至关重要的。 2. 内存容量&#xff1a;AI需要大量的内存来…

cryptojs加密和java解密:AES算法

试了一下午终于跑通了&#xff0c;一开始尝试RC4算法生成的密文在java中解密不出来&#xff0c;放弃了&#xff0c;改用AES。 js代码 import aes from crypto-js/aes; import base from crypto-js/enc-base64;function encrypt(plaintext: string) {const iv base.parse(ZGY…

【论文解读】:大模型免微调的上下文对齐方法

本文通过对alignmenttuning的深入研究揭示了其“表面性质”&#xff0c;即通过监督微调和强化学习调整LLMs的方式可能仅仅影响模型的语言风格&#xff0c;而对模型解码性能的影响相对较小。具体来说&#xff0c;通过分析基础LLMs和alignment-tuned版本在令牌分布上的差异&#…

测试:SSE VS WebSocket

SSE&#xff08;Server-Sent Events&#xff09; SSE&#xff08;Server-Sent Events&#xff09;接口是一种实现服务器到客户端单向实时通信的技术。通过SSE&#xff0c;服务器可以主动向客户端推送数据&#xff0c;而不需要客户端不断地向服务器请求数据。这种技术特别适合于…

100多种视频转场素材|专业胶片,抖动,光效电影转场特效PR效果预设

100多种 Premiere Pro 效果预设&#xff0c;包含&#xff1a;“胶片框架”、“胶片烧录”、“彩色LUT”、“相机抖动”、“电影Vignette”和“胶片颗粒”。非常适合制作复古风格的视频&#xff0c;添加独特的色彩。包括视频教程。 来自PR模板网&#xff1a;https://prmuban.com…

git 本地有改动,远程也有改动,且文件是自动生成的配置文件

在改动过的地方 文件是.lock文件&#xff0c;自动生成的。想切到远程的分支&#xff0c;但是远程的分支也有改动过。这时候就要解决冲突&#xff0c;因为这是两个分支&#xff0c;代码都是不一样的&#xff0c;要先把这改动的代码提交在本地或者提交在本分支的远程才可以切到其…

在Arch Linux上安装yay

有点麻烦。 准备 # pacman -Syu # pacman -S --needed base-devel git 变身为普通用户 不能使用root下载代码。所以要变身为普通用户&#xff1a; # sueradd tsit # su tsit 下载代码 $ git clone https://aur.archlinux.org/yay.git 编译安装 $ cd yay $ makepkg -si…

ke13--10章-1数据库JDBC介绍

注册数据库(两种方式),获取连接,通过Connection对象获取Statement对象,使用Statement执行SQL语句。操作ResultSet结果集 ,回收数据库资源. 需要语句: 1Class.forName("DriverName");2Connection conn DriverManager.getConnection(String url, String user, String…

在 CentOS 或 Red Hat 系统上安装 Citus 组件

要在 CentOS 或 Red Hat 系统上安装 Citus 组件&#xff0c;你可以按照以下步骤操作&#xff1a; 首先&#xff0c;使用 curl 命令下载 Citus 社区版的安装脚本&#xff1a; curl https://install.citusdata.com/community/rpm.sh > add-citus-repo.sh接着&#xff0c;使用 …

使用 PyInstaller 将 Python 脚本转换为可执行文件(.exe)

安装库&#xff1a; pip install pyinstaller 使用方法&#xff1a; pyinstaller --onefile your_python_file.py 自定义可执行文件的特性 你可以使用一些可选参数来自定义生成的可执行文件的特性。例如&#xff0c;你可以使用 --icon 参数设置生成的可执行文件的图标&#…

Qt国际化翻译Linguist使用

QT的国际化是非常方便的&#xff0c;简单的说就是QT有自带的翻译工具把我们源代码中的字符串翻译成任何语言文件&#xff0c;再把这个语言文件加载到项目中就可以显示不同的语言。下面直接上手&#xff1a; 步骤一&#xff1a;打开pro文件&#xff0c;添加&#xff1a;TRANSLA…