Vue 跨域的两种解决方式
一、通过 proxy 解决跨域
1.1 baseURL 配置
对 axios 二次封装时,baseURL 设置为 '/api'。
const serviceAxios = axios.create({baseURL: '/api',timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});
1.2 vue.config.js 配置 proxy 代理
在 vue.config.js 的 target 填入后端真实运行的接口地址。
pathRewrite 的作用是将 /api 接口前缀重写,我这边是置为空,因为后端的控制层并没有去匹配 /api。
// vue.config.jsmodule.exports = defineConfig({devServer: {// 配置跨域proxy: {'/api': {target: 'http://yunhu.com:8090/',ws: false,changOrigin: true, // 允许跨域pathRewrite: {'^/api': ''}}}}
})
二、通过 nginx 反向代理实现跨域
2.1 baseURL 配置
对每一个请求的前缀都加上 /api,然后再在 nginx 中配置转发策略。
const serviceAxios = axios.create({baseURL: "http://yunhu.com:9049/api/",timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});
2.2 nginx 配置
nginx 监听 9049 端口,然后将接口前缀是 /api 的转发到 8090 端口,就是运行 Spring Boot 后端程序的那个端口。
由于我们的后端控制层并没有 /api,所以这边也需要 rewrite 将 /api 重写为空。
这边 proxy_pass,也可以是 http://yunhu.com:8090/,但是我用了内网地址,不用再通过 DNS 解析了,可以提高一点点性能。
# nginx.confserver {listen 9049;location / {root /root/library/library-web-vue/dist;index index.html index.htm;}location ^~/api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://10.0.12.16:8090/;}
}
相关文章:
Vue 跨域的两种解决方式
一、通过 proxy 解决跨域 1.1 baseURL 配置 对 axios 二次封装时,baseURL 设置为 /api。 const serviceAxios axios.create({baseURL: /api,timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie });1.2 vue.config.js 配置…...
【windows Docker 安装mysql:只需3条命令】
如下 docker pull mysql docker run --name mysql -p 3306:3306 -v D:/dockerFile/mysql/data:/var/lib/mysql/ -v D:/dockerFile/mysql/conf/my.cnf:/etc/mysql/my.cnf -e MYSQL_ROOT_PASSWORDroot -d mysql:latest --default-authentication-pluginmysql_native_password do…...
【软件逆向】如何逆向Unity3D+il2cpp开发的安卓app【IDA Pro+il2CppDumper+DnSpy+AndroidKiller】
教程背景 课程作业要求使用反编译技术,在游戏中实现无碰撞。正常情况下碰撞后角色死亡,修改为直接穿过物体不死亡。 需要准备的软件 il2CppDumper。DnSpy。IDA Pro。AndroidKiller。 一、使用il2CppDumper导出程序集 将{my_game}.apk后缀修改为{my_…...
vue3ref和reactive
Vue 3中的ref和reactive是两个重要的响应式API。 ref用于将基本数据类型转换为响应式数据,它返回一个包含value属性的响应式对象。ref适合用于单个值的响应式需求,例如计数器、表单数据等。示例代码: <template><div><p>…...
[架构之路-244]:目标系统 - 设计方法 - 软件工程 - 软件开发方法与软件开发模型
目录 一、软件开发方法:组织、管理、复用软件代码的方法 1.1 概述: 软件聚合的程度由简单到复杂 1.2 结构化的开发方法 1.3 面对对象的开发方法 1.4 面向组件的开发方法 1.5 面向服务的开发方法 1.6 不同开发方法比较:结构化、面对对象、面向组件…...
Matter 系列 #10|Matter 的证书吊销机制
乐鑫 Matter 系列文章 #10 在之前的多篇博客文章中,我们从不同方面介绍了 Matter,其中包括 Matter 的安全模型。简单回顾一下,Matter 的安全模型基于 PKI(即公钥基础设施)机制,可用于建立和管理数字证书、加…...
mybatis动态表名
1.基于mybatis官方文档 Configuration public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();DynamicTableNameInnerInterceptor dynamicTableNameInnerIntercep…...
高校为什么需要大数据挖掘平台?
目前数据挖掘已经成为各种应用领域的重要技术,大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识,也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去,教学过程理…...
@Value的使用
在spring boot项目中,Value只能获取非静态变量,否则是null /*** cron"0 */1 * * * ?"*/ Value("${system.cron}") private String cron;/*** cron1null*/ Value("${system.cron}") private static String cron1;静态块获…...
用 Wireshark 在 Firefox 或 Google Chrome 上使用 SSLKEYLOGFILE 环境变量解密 SSL 流量
原文:这 您希望使用 SSL 会话密钥解密和检查 SSL 应用程序数据。 您希望在客户端系统上记录 SSL 会话密钥。 您正在客户端系统上使用 Firefox 或 Google Chrome 浏览器来访问 Web 应用程序。 注意:您还可以在客户端系统上使用 Microsoft Edge ÿ…...
京东大数据:2023年Q3美妆行业数据分析报告
近日,珀莱雅发布三季报,今年前三季度,公司实现营收52.49亿元,同比增长32.47%。分季度看,“618大促”所在Q2业绩增长最为亮眼,营收同比增速达到46.22%,进入Q3,在电商大促缺席情况下&a…...
[题] 改革春风吹满地 #图论 #多边形面积
题目 HDU 2036 改革春风吹满地 题解 参考博客:HDU 2036 改革春风吹满地 代码 #include<bits/stdc.h> using namespace std; const int N 110; //叉乘计算面积的公式,以(0,0)为起始点划分 int main() {int n;while(~scanf("%d", &…...
FPGA时序分析与约束(2)——时序电路时序
一、前言 在之前的内容中,我们介绍了组合电路的时序问题和可能导致的毛刺,强烈推荐在阅读前文的基础上再继续阅读本文, 前文链接:FPGA时序分析与约束(1)——组合电路时序 这篇文章中,我们将继续…...
明御安全网关任意文件上传漏洞复现
简介 安恒信息明御安全网关(NGFW) 秉持安全可视、简单有效的理念,以资产为视角的全流程防御的下一代安全防护体系,并融合传统防火墙、入侵防御系统、防病毒网关、上网行为管控、VPN网关、威胁情报等安全模块于一体的智慧化安全网关。 较低版本的系统存…...
JVM虚拟机:如何查看自己的JVM默认的垃圾回收器
只需要在程序运行的时候指定下面的参数就可以看到当前自己的JVM默认的垃圾回收器是什么?如下所示: 如上所示,默认使用的是G1回收器,这是我的电脑,因为我的电脑安装jdk的版本是1.9 如果你的jdk的版本是1.8,那…...
目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】机器视觉
目录 前言 几个高频面试题目 像素和像元如何选择?...
设计模式——建造者模式
目录 建造者模式盖房项目需求基本介绍四个角色实例代码注意事项和细节抽象工厂模式 VS 建造者模式 建造者模式 盖房项目需求 传统方式:打地基,砌墙,封顶 盖房子步骤 public abstract class AbstractHouse {// 地基public abstract void b…...
Go语言用Colly库编写的图像爬虫程序
下面是一个使用Colly库编写的Go语言图像爬虫程序,该程序会爬取news.qq上的图片,并使用proxy_host:duoip和proxy_port:8000的爬虫IP服务器进行抓取。 package mainimport ("fmt""net/http""github.com/crawlab-collective/go-co…...
14.2 并发与竞争实验
一、原子操作实验 这节使用原子操作来实现对 LED 设备的互斥访问,也就是只有一个应用程序能使用 LED。 1.1 实验程序编写 因为是 12 章已经修改了设备树,所以这里暂时不用修改。 在 /linux/atk-mpl/Drivers 该目录下创建 7_atomic 子目录,并且…...
【MediaTek】T750实现Host 网络和Guest 网络隔离以及各个连接终端间隔离功能
T750 WiFi WiFi芯片MT7915AN Wi-Fi 标准IEEE 802.11a/b/g/n/ac/ax支持的速率802.11ax: 4 到 2400 Mbps802.11ac: 6.5 到 1732 Mbps802.11n: 6.5 到 600 Mbps802.11a/g:6 到 54 Mbps802.11b: 1 到 11 Mbps支持的信道2.4 GHz:1-135 GHz:36-64、100-144 和 149-165多输入多输…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
