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

2023/2/26 Vue学习笔记 配置代理解决跨域[CORS ]的问题

利用vue的脚手架巧妙的解决ajax跨域的问题

1 我们首先利用springboot服务搭建

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意这里引出了跨域[CORS ]的问题:

Access to XMLHttpRequest at 'http://localhost:5000/getUserInfo' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

请求http的同源策略:1 2 3 点必须保持一致。

http://localhost:5000/getUserInfo
1、协议名 http
2、主机名 localhost
3、端口号 5000

违背了同源策略就会造成跨域问题。这里引出了配置代理的解决方案:

2 配置代理服务器 - 借助vue cli 开启代理服务器

Vue CLI官网—配置参考—devServer.proxy:配置参考 | Vue CLI
在这里插入图片描述
如何开启代理服务器?借助vue cli 开启代理服务器:

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
在这里插入图片描述
在这里插入图片描述
但是如果我们在public文件夹中存在数据的话:
在这里插入图片描述
在这里插入图片描述
有一个请求顺序的问题:先找自己public文件夹的资源,如果没有在去服务器中查询。public文件夹就相当于8080服务器的根路径。public文件夹里有的东西都算是8080中有的。

<template><btn/>
</template><script>
import Btn from "@/components/Btn";export default {name: 'App',components: {Btn}
}
</script><style>
</style>
<template><div><button @click="get">请求数据</button></div>
</template><script>
import axios from 'axios'export default {name: `Btn`,methods: {get() {axios.get('http://localhost:8080/hello.txt').then(response => {console.log(response.data)},error => {console.log(error.message)})}}
}
</script><style>
</style>
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false, // 关闭语法检查devServer: {proxy: 'http://localhost:5000'}
})

但是,以上方式不够灵活的控制走不走代理服务器,且不能够配置多个代理。基于此提出了如下解决方案:

在这里插入图片描述
在这里插入图片描述
如上问题,pathRewrite: {'^/inspur': ''},
在这里插入图片描述
在这里插入图片描述
改变来源请求的服务http:

changeOrigin: true
/*** changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000* changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080* changeOrigin默认值为true*/

在这里插入图片描述
1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
2.缺点:配置略微繁琐,请求资源时必须加前缀。

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false, // 关闭语法检查devServer: {proxy: {'/inspur': { // 请求前缀,若想走代理就在http加一个 /apitarget: 'http://localhost:5000',pathRewrite: {'^/inspur': ''},ws: true, // 用于支持websocketchangeOrigin: true/*** changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000* changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080* changeOrigin默认值为true*/}}}
})

相关文章:

2023/2/26 Vue学习笔记 配置代理解决跨域[CORS ]的问题

利用vue的脚手架巧妙的解决ajax跨域的问题 1 我们首先利用springboot服务搭建 注意这里引出了跨域[CORS ]的问题: Access to XMLHttpRequest at http://localhost:5000/getUserInfo from origin http://localhost:8080 has been blocked by CORS policy: No Access-Control-A…...

算法练习--深拷贝与浅拷贝

&#x1f380;个人主页&#xff1a;努力学习前端知识的小羊 感谢你们的支持&#xff1a;收藏&#x1f384; 点赞&#x1f36c; 加关注&#x1fa90; 文章目录算法地址算法题解分析深拷贝与浅拷贝在练习算法时&#xff0c;遇到了深拷贝与浅拷贝的问题&#xff0c;于是就了解了一…...

Wireshark “偷窥”浏览器与服务器三次握手

本文使用的是Wireshark 4.0.3, Java 11 编写简易服务器&#xff0c;客户端使用Chrome浏览器移动端开发或是前、后端开发又或是高大上的云计算都脱离不了网络&#xff0c;离开了网络的计算机就是一个孤岛&#xff0c;快速上手开发、背面试八股文固然有些急功近利&#xff0c;但确…...

基于stm32温湿度采集平台开发

基于stm32温湿度采集平台开发这里记录一下自己以前课设报告&#xff0c;但是论文中图片和文字、公式太多了&#xff0c;懒得粘贴了&#xff0c;需要完整的可q我963_160_156&#xff0c;也可在微信公众号 *高级嵌入式软件* 里回复 *温湿度* 查看完整版文章摘 要关键词第一章 绪论…...

单机模拟kafka分布式集群(演示生产、消费数据过程)

用单机搭建kafka伪分布式集群&#xff0c;其实集群的概念并不复杂 先说明一下&#xff0c;以下的每个服务启动后都需要新开一个终端来启动另外的服务(因为是集群&#xff0c;自然会用多个终端) 首先下载kafka 提取码&#xff1a;dvz4 或者直接去官网下载kafka_2.11-1.0.0.tgz t…...

办公室人员离岗识别检测系统 yolov7

办公室人员离岗识别检测系统根据yolov7网络模型深度学习技术&#xff0c;办公室人员离岗识别检测算法能够7*24小时全天候自动识别人员是否在岗位。YOLOv7 在 5 FPS 到 160 FPS 范围内&#xff0c;速度和精度都超过了所有已知的目标检测器&#xff0c;并在V100 上&#xff0c;30…...

Android从屏幕刷新到View的绘制(一)之 Window、WindowManager和WindowManagerService之间的关系

0. 相关分享 Android从屏幕刷新到View的绘制&#xff08;一&#xff09;之 Window、WindowManager和WindowManagerService之间的关系 Android从屏幕刷新到View的绘制&#xff08;二&#xff09;之Choreographer、Vsync与屏幕刷新 1. 相关类 WindowManagerService&#xff0c…...

#多源数据融合#:HSI与Lidar

Lidar数据与HSI数据融合应该注意的问题 融合激光雷达&#xff08;lidar&#xff09;数据和高光谱数据可以提高地物特征的识别和分类准确性。以下是一些融合这两种数据的注意事项&#xff1a; 数据预处理 由于激光雷达数据和高光谱数据的特点不同&#xff0c;需要对两种数据进…...

android 权限控制与进程隔离

每次介绍说是做系统安全的,面试和领导首先就是说配selinux,实在很无语。虽然权限控制是安全很重要一环。 linux的进程就是系统运行中的程序(process),是正在执行的一个程序或者命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源。Linux环境下…...

链表(一):移除链表元素、设计链表等力扣经典链表题目

203.移除链表元素相关题目链接&#xff1a;力扣 - 移除链表元素题目重现给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。思路链表的删除操作如上图所示&#xff0c;我们需要先找到要删除的…...

计算机网络 第4章 作业1

一、选择题 1. 由网络层负责差错控制与流量控制,使分组按序被递交的传输方式是_________&#xff08;C&#xff09; A&#xff0e;电路交换 B&#xff0e;报文交换 C&#xff0e;基于虚电路的分组交换 D&#xff0e;基于数据报的分组交换 2. TCP/IP 参考…...

Redis-Java代码使用示例

在我之前的项目中&#xff0c;使用Redis是我们团队自己封装了一个Redis操作类&#xff0c;但是这只是在Spring提供的RedisTemplate上做了一层封装而已&#xff0c;当时使用不是很熟练&#xff0c;都是一边在网上查资料&#xff0c;一边使用&#xff1b;这篇文章会介绍两种使用方…...

acwing3485最大异或和(trie树,贪心)

给定一个非负整数数列 a&#xff0c;初始长度为 N。 请在所有长度不超过 M 的连续子数组中&#xff0c;找出子数组异或和的最大值。 子数组的异或和即为子数组中所有元素按位异或得到的结果。 注意&#xff1a;子数组可以为空。 输入格式 第一行包含两个整数 N,M。 第二行…...

EasyRecovery16免费的电脑的数据恢复工具

常见的数据恢复有两种方式&#xff0c;第一种方式是找别人恢复&#xff0c;按照市场价来说&#xff0c;数据恢复的价格每次在100-500之间&#xff0c;但这种方式容易使自己设备上的隐私资料泄露出去&#xff0c;不安全。 另一种方式则是自己学会数据恢复的方法&#xff0c;有问…...

银行数字化转型导师坚鹏:平安银行数字化转型—橙E网战略研究

平安银行对公业务数字化转型案例—橙E网战略研究课程背景&#xff1a; 很多银行存在以下问题&#xff1a;不清楚银行对公业务数字化转型能否成功&#xff1f;不知道其它银行对公业务数字化转型的实际做法&#xff1f; 课程特色&#xff1a;用实战案例解读平安银行对公业务…...

tun驱动之open

tun驱动对应的设备文件是&#xff1a;/dev/net/tun&#xff0c;其详细信息如下&#xff1a; crw-rw-rw- 1 root root 10, 200 2月 26 08:05 tun 主次设备号的定义如下&#xff1a; #define MISC_MAJOR 10 #define TUN_MINOR 200 由于tun驱动属于misc设备驱动&#xff0c;因此用…...

计算机网络体系结构

计算机网络体系结构是指计算机网络中各个层次和功能组成的结构体系&#xff0c;它定义了计算机网络中各层次之间的协议和接口&#xff0c;以实现不同类型、不同规模、不同性能的计算机之间的互联和通信&#xff0c;同时提供各种网络服务和应用。计算机网络体系结构通常被分为多…...

基础夯实,字节内部总结240道算法LeetCode刷题笔记,直呼太全

1、什么是算法算法(algorithm&#xff0c;[ˈlɡərɪəm]&#xff0c;计算程序)&#xff1a;就是定义良好的计算过程&#xff0c;他取一个或一组的值为输入&#xff0c;并产生出一个或一组值作为输出。简单来说算法就是一系列的计算步骤&#xff0c;用来将输入数据转化成输出结…...

Three.js使用WebWorker进行八叉树碰撞检测

经过一番探索后还是采用了整个碰撞检测都交给worker来做 原因 如果是小的模型还是不需要这么做的 js线程足够处理构建时的开销 步骤 将需要被检测的物体集合转换成可以背worker接收的结构化数据发送给worker worker将结构化的数据转换成有效的Three元素集合并对其构建八叉树fr…...

【教程】Notion笔记多平台设置中文显示

这个笔记软件界面挺好看&#xff0c;惊艳到了。 目录 网页版 桌面端 Windows版 Mac端 安卓端 网页版 直接安装这个插件即可&#xff0c;Chrome/Edge适用&#xff1a;Notion中文版 桌面端 都要去这个github下载语言包&#xff0c;用于替换文件&#xff1a;https://github.c…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...