当前位置: 首页 > news >正文

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.jstarget 填入后端真实运行的接口地址。

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用于将基本数据类型转换为响应式数据&#xff0c;它返回一个包含value属性的响应式对象。ref适合用于单个值的响应式需求&#xff0c;例如计数器、表单数据等。示例代码&#xff1a; <template><div><p>…...

[架构之路-244]:目标系统 - 设计方法 - 软件工程 - 软件开发方法与软件开发模型

目录 一、软件开发方法&#xff1a;组织、管理、复用软件代码的方法 1.1 概述: 软件聚合的程度由简单到复杂 1.2 结构化的开发方法 1.3 面对对象的开发方法 1.4 面向组件的开发方法 1.5 面向服务的开发方法 1.6 不同开发方法比较&#xff1a;结构化、面对对象、面向组件…...

Matter 系列 #10|Matter 的证书吊销机制

乐鑫 Matter 系列文章 #10 在之前的多篇博客文章中&#xff0c;我们从不同方面介绍了 Matter&#xff0c;其中包括 Matter 的安全模型。简单回顾一下&#xff0c;Matter 的安全模型基于 PKI&#xff08;即公钥基础设施&#xff09;机制&#xff0c;可用于建立和管理数字证书、加…...

mybatis动态表名

1.基于mybatis官方文档 Configuration public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();DynamicTableNameInnerInterceptor dynamicTableNameInnerIntercep…...

高校为什么需要大数据挖掘平台?

目前数据挖掘已经成为各种应用领域的重要技术&#xff0c;大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识&#xff0c;也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去&#xff0c;教学过程理…...

@Value的使用

在spring boot项目中&#xff0c;Value只能获取非静态变量&#xff0c;否则是null /*** cron"0 */1 * * * ?"*/ Value("${system.cron}") private String cron;/*** cron1null*/ Value("${system.cron}") private static String cron1;静态块获…...

用 Wireshark 在 Firefox 或 Google Chrome 上使用 SSLKEYLOGFILE 环境变量解密 SSL 流量

原文&#xff1a;这 您希望使用 SSL 会话密钥解密和检查 SSL 应用程序数据。 您希望在客户端系统上记录 SSL 会话密钥。 您正在客户端系统上使用 Firefox 或 Google Chrome 浏览器来访问 Web 应用程序。 注意&#xff1a;您还可以在客户端系统上使用 Microsoft Edge &#xff…...

京东大数据:2023年Q3美妆行业数据分析报告

近日&#xff0c;珀莱雅发布三季报&#xff0c;今年前三季度&#xff0c;公司实现营收52.49亿元&#xff0c;同比增长32.47%。分季度看&#xff0c;“618大促”所在Q2业绩增长最为亮眼&#xff0c;营收同比增速达到46.22%&#xff0c;进入Q3&#xff0c;在电商大促缺席情况下&a…...

[题] 改革春风吹满地 #图论 #多边形面积

题目 HDU 2036 改革春风吹满地 题解 参考博客&#xff1a;HDU 2036 改革春风吹满地 代码 #include<bits/stdc.h> using namespace std; const int N 110; //叉乘计算面积的公式&#xff0c;以(0,0)为起始点划分 int main() {int n;while(~scanf("%d", &…...

FPGA时序分析与约束(2)——时序电路时序

一、前言 在之前的内容中&#xff0c;我们介绍了组合电路的时序问题和可能导致的毛刺&#xff0c;强烈推荐在阅读前文的基础上再继续阅读本文&#xff0c; 前文链接&#xff1a;FPGA时序分析与约束&#xff08;1&#xff09;——组合电路时序 这篇文章中&#xff0c;我们将继续…...

明御安全网关任意文件上传漏洞复现

简介 安恒信息明御安全网关(NGFW) 秉持安全可视、简单有效的理念&#xff0c;以资产为视角的全流程防御的下一代安全防护体系&#xff0c;并融合传统防火墙、入侵防御系统、防病毒网关、上网行为管控、VPN网关、威胁情报等安全模块于一体的智慧化安全网关。 较低版本的系统存…...

JVM虚拟机:如何查看自己的JVM默认的垃圾回收器

只需要在程序运行的时候指定下面的参数就可以看到当前自己的JVM默认的垃圾回收器是什么&#xff1f;如下所示&#xff1a; 如上所示&#xff0c;默认使用的是G1回收器&#xff0c;这是我的电脑&#xff0c;因为我的电脑安装jdk的版本是1.9 如果你的jdk的版本是1.8&#xff0c;那…...

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】机器视觉

目录 前言 几个高频面试题目 像素和像元如何选择?...

设计模式——建造者模式

目录 建造者模式盖房项目需求基本介绍四个角色实例代码注意事项和细节抽象工厂模式 VS 建造者模式 建造者模式 盖房项目需求 传统方式&#xff1a;打地基&#xff0c;砌墙&#xff0c;封顶 盖房子步骤 public abstract class AbstractHouse {// 地基public abstract void b…...

Go语言用Colly库编写的图像爬虫程序

下面是一个使用Colly库编写的Go语言图像爬虫程序&#xff0c;该程序会爬取news.qq上的图片&#xff0c;并使用proxy_host:duoip和proxy_port:8000的爬虫IP服务器进行抓取。 package mainimport ("fmt""net/http""github.com/crawlab-collective/go-co…...

14.2 并发与竞争实验

一、原子操作实验 这节使用原子操作来实现对 LED 设备的互斥访问&#xff0c;也就是只有一个应用程序能使用 LED。 1.1 实验程序编写 因为是 12 章已经修改了设备树&#xff0c;所以这里暂时不用修改。 在 /linux/atk-mpl/Drivers 该目录下创建 7_atomic 子目录&#xff0c;并且…...

【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多输入多输…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...