Vue配置代理解决跨域

Network的status中报CORS error指在前端(Vue.js)发起跨域请求时,被服务器拒绝访问的错误
在本地开发环境中,Vue.js 将默认从 http://localhost:8080 启动服务器。如果浏览器访问服务器时使用的 URL 不是该地址,就可能触发 CORS 错误。

此时可以通过代理服务器将前端的请求转发到后端服务器。可以使用 http-proxy-middleware 中间件来实现代理。在 devServer 配置中添加以下代码即可

CORS 是一种安全策略,用于防止恶意网站通过跨域请求获取到用户的敏感数据。浏览器会使用 CORS 策略来检查发起的请求是否来自同源(Origin)的地址。如果请求的来源地址与目标地址不是同源,浏览器就会阻止该请求,出现 CORS 错误。

配置代理可以理解为Vue为你开了一台和你端口号相同的服务器,将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话

方式一:配置代理服务器

在vue.config.js文件下配置代理服务器:

devServer: {proxy:'xxx',  // 服务器端口
}

以上方法不能配置多个代理,不能灵活地控制是否走代理

方式二:如果使用该写法,就能够配置多个代理服务器,还能灵活控制是否走代理

在vue.config.js文件下配置代理服务器:

module.exports = {devServer: {proxy: {// 配置所有以 '/api1' 开头的请求路径'/api1': {target: 'http://XXX',  // 代理目标的端口路径changeOrigin: true, // 是否更改配置代理服务器的端口号pathRewrite: {'^/api1': ''} // 替换请求路径中的字符}},// 配置所有以 '/api2' 开头的请求路径'/api2': {target: 'http://XXX',changeOrigin: true,pathRewrite: {'^/api2': ''}}},}
}

以上代码表示访问 Vue.js 中的 /api 路径时,会被代理到 http://localhost:3000changeOrigin 设置为 true 表示将请求头中 host 字段设置为代理服务器的地址,以避免 CORS 错误。pathRewrite 设置表示在代理时将请求的路径中 /api 替换为空字符串。

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

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

相关文章

selenium 解决 id定位、class定位中,属性值带空格的解决办法

一、前置说明 selenium遇到下面这种元素&#xff1a; <th id"demo id" class"value1 value2 value3 ">1、虽然id一般不会有空格&#xff0c;但是前端错误的这种写法(如下图)&#xff0c;会造成使用id定位不到元素&#xff0c;如&#xff1a; find…

Unity3D对CSV文件操作(创建、读取、写入、修改)

系列文章目录 Unity工具 文章目录 系列文章目录前言一、Csv是什么&#xff1f;二、创建csv文件2-1、构建表数据2-2、创建表方法2-3、完整的脚本&#xff08;第一种方式&#xff09;2-4、运行结果2-5、完整的脚本&#xff08;第二种方式&#xff09;2-6、运行结果2-7、想用哪种…

《Linux源码趣读》| 好书推荐

目录 一. &#x1f981; 前言二. &#x1f981; 像小说一样趣读 Linux 源码三. &#x1f981; 学习路线 一. &#x1f981; 前言 最近、道然科技给狮子送了两本书&#xff1a;一本是付东来的《labuladong的算法笔记》、一本是闪客著的《Linux源码趣读》&#xff0c;《labulado…

Python并发-线程和进程

一、线程和进程对应的问题 **1.进程&#xff1a;**CPU密集型也叫计算密集型&#xff0c;指的是系统的硬盘、内存性能相对CPU要好很多&#xff0c;此时&#xff0c;系统运作大部分的状况是CPU Loading 100%&#xff0c;CPU要读/写I/O(硬盘/内存)&#xff0c;I/O在很短的时间就可…

ZLMediakit-method ANNOUNCE failed: 401 Unauthorized(ffmpeg、obs推流rtmp到ZLM发现的问题)

错误截图 解决办法&#xff1a;能推流成功&#xff0c;但是不能写入到wvp数据库中 修改配置文件config.ini 改成0 修改之后 重启服务 systemctl restart zlm*推流成功 解决办法&#xff1a;能推流&#xff0c;能写入数据库中 替换zlm版本&#xff0c;可以用我文章中提供的编译…

【STM32入门】3.OLED屏幕

1.OLED引脚 OLED屏幕的接线按图所示&#xff0c;本例中用的是4管脚OLED屏幕 2.驱动程序 配套的驱动程序是“OLED.c"&#xff0c;主要由以下函数构成&#xff1a;1、初始化&#xff1b;2、清屏&#xff1b;3、显示字符&#xff1b;4、显示字符串&#xff1b;5、显示数字…

计算机毕业设计 基于SpringBoot的高校毕业与学位资格审核系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

LAMP安装部署网站

目录 什么是LAMP? 实验&#xff08;搭建一个论坛&#xff09; 一&#xff0c;安装apache 1.关闭防火墙&#xff0c;将安装Apache所需软件包传到/opt目录下 2.安装环境依赖包 3.配置软件模块 4.编译及安装 5.优化配置文件路径&#xff0c;并把httpd服务的可执行程序文件…

什么是网站劫持

网站劫持是一种网络安全威胁&#xff0c;它通过非法访问或篡改网站的内容来获取机密信息或者破坏计算机系统。如果您遇到了网站劫持问题&#xff0c;建议您立即联系相关的安全机构或者技术支持团队&#xff0c;以获得更专业的帮助和解决方案。

python数据分析之二、读取excel数据并绘制折线图,柱状图、饼状图

今天开始第二篇&#xff0c;也是那位可爱的同学的期末作业 题目基本描述如下&#xff1a;给一个简单的execl表格数据&#xff0c;用并列折线图&#xff0c;并列柱状图和饼图来表现数据。 现给定表格数据如下&#xff1a; 地区人口数0-14岁5-64岁65岁及以上全国14940542613671…

LeetCode124.二叉树中最大路径和

第一次只花了20分钟左右就完全靠自己把一道hard题做出来了。我这个方法还是非常简单非常容易理解的&#xff0c;虽然时间复杂度达到了O(n2)。以下是我的代码&#xff1a; class Solution {int max;public int maxPathSum(TreeNode root) {max Integer.MIN_VALUE;return dfs2(…

船舶机电设备振动数据采集监控系统解决方案

船舶运行中&#xff0c;通常需要通过振动数据采集系统对船舶的各个机电设备运行进行监控&#xff0c;有助于在设备故障时快速预警&#xff0c;进行诊断、分析和维护&#xff0c;保证船舶机电设备正常工作&#xff0c;从而确保工作人员及船舶的安全。 船舶各种机电设备会产生大…

机器连接和工业边缘计算

软件应用和IT创新是制造业投资的主要驱动力。解决方案架构应围绕特定标准进行整合&#xff0c;并采用架构蓝图和最佳实践来满足最终用户的需求。此外&#xff0c;边缘计算&#xff08;Edge Computing&#xff09;也将在制造业中加速部署。 边缘计算是制造业的下一个变革驱动力。…

PyQt基础_011_对话框类控件QMessage

基本功能 import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class WinForm( QWidget): def __init__(self): super(WinForm,self).__init__() self.setWindowTitle("QMessageBox") self.resize(300, 100) self.myButt…

Unity3D实现鼠标悬浮UI或物体上显示文字信息

系列文章目录 Unity工具 文章目录 系列文章目录前言最终效果一、UI事件显示文字1-1 ui事件需要引用命名空间using UnityEngine.EventSystems;1-2 IPointerEnterHandler 接口1-3 IPointerExitHandler 接口1-4 IPointerMoveHandler 接口 二、场景搭建2-1 实现如下 三、代码实现3…

C# 语法笔记

1.ref、out&#xff1a;参数传递的两种方式 ref&#xff1a;引用传递 using System; namespace CalculatorApplication {class NumberManipulator{public void swap(ref int x, ref int y){int temp;temp x; /* 保存 x 的值 */x y; /* 把 y 赋值给 x */y temp; /* 把 t…

Grad-CAM原理

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 只要大家一提到深度学习 缺乏一定的解释性 比如说在我们之前讲的分类网络当中 网络它为什么要这么预测 它针对每个类别所关注的点在哪里呢 在great cam这篇论文当中呢 就完美的解决了在cam这篇论…

Python 数据分析:日期型数据的玩转之道

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在数据分析的领域中&#xff0c;处理日期型数据是至关重要的一环。Python 提供了丰富的工具和库&#xff0c;使得对日期进行分析、处理、可视化变得更加轻松。本文将深入探讨 Python 中如何玩转日期型数据&#…

QMenu风格设计qss+阴影

Qt的菜单经常在软件开发中用到&#xff0c;默认的菜单效果都不符合设计师的要求&#xff0c;本篇介绍QMenu菜单的风格设计&#xff0c;包括样式表和阴影。 1.QMenu样式表的设计 首先看一个默认的菜单 void QGraphicsDropShadowEffectDemo::slotShowDialog() {qDebug() <&l…