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多输入多输…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库,用于数据验证和设置管理,通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发(如 FastAPI)、配置管理和数据解析,核心功能包括: 数据验证:通过…...
AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)
Name:3ddown Serial:FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名:Axure 序列号:8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...
