浏览器端代理proxy 解决跨域

news2024/9/23 19:22:26

一.环境:使用express+http-proxy-middleware 

直接上代码

// include dependencies
const express = require( 'express');

//node内置的path模块导入
const path= require("path")

const { createProxyMiddleware } = require( 'http-proxy-middleware');
// 需要代理后端服务器
const options = {
target:'https://www.baidu.com',
 changeOrigin: true,
};

const exampleProxy = createProxyMiddleware(options);

const app = express();
app.use('/omp-api/public',exampleProxy);

// 前端资源 可以通过另一个服务地址 也可以直接静态私服
app.use('/', createProxyMiddleware({
    target: 'http://localhost:8080/',
    changeOrigin: true
}));

//静态私服
//将需要加载的静态资源的总目录转换成绝对路径
const public = path.resolve(__dirname, "../../static");
app.use(express.static(public));


app.listen("3001", () => {
  console.log("开启服务端:http://localhost:3001");
})

最后通过http://localhost:3001 访问 

 

二.原理就是proxy代理

网上看了很多 讲的很复杂 我个人理解就是中介 也欢迎大家一起讨论

最后感觉这个比nginx 设置要方便一些 不用每次都找nginx的config 改

如果是直接写浏览器端还是非常方便解决跨域问题的

三.参考资料

http-proxy-middleware:

github:

https://github.com/chimurai/http-proxy-middleware/tree/v0.21.0#readme

gitte:

http-proxy-middleware: :zap: The one-liner node.js http-proxy middleware for connect, express and browser-sync

参考链接:

https://www.cnblogs.com/qlqwjy/p/12012783.html

参考链接:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux6.12 Docker 数据管理和镜像的创建

文章目录 计算机系统5G云计算第四章 LINUX Docker 数据管理和镜像的创建一、Docker 的数据管理1.数据卷2.数据卷容器 二、容器互联(使用centos镜像)三、Docker 镜像的创建1.基于现有镜像创建1)首先启动一个镜像,在容器里做修改2&a…

通达信指标回测系统的高级玩法:优化参数

#1.本期主要的学习内容: A.找到最优的选股信号,即最佳参数的寻找方法。 B.学会使用通达信内置的(程序交易评测系统)指标回测系统。 #2.程序交易评测系统的打开方法 选择公式——程序交易评测系统 快捷键:CTRLS 键…

了解Unity编辑器之组件篇Event(七)

Event:用于在对象之间进行通信和交互的机制。它可以帮助你实现触发和响应特定动作或状态的逻辑一、Event System:用于处理 UI 事件的系统组件 First Selected 属性:定义了在场景加载或 UI 激活时,哪个 UI 元素将成为首选的选中元素…

动态内存管理学习分享

动态内存管理学习分享 1. 为什么存在动态内存分配2. 动态内存函数的介绍2.1 [malloc](https://legacy.cplusplus.com/reference/cstdlib/malloc/?kwmalloc)和[free](https://legacy.cplusplus.com/reference/cstdlib/free/?kwfree)2.1.1 实例 2.2 [calloc](https://legacy.cp…

TikTok标签观看量破347亿次!芭比妆容蕴藏巨大商机!

据外媒报道,随着真人版电影《芭比》的上映,英国在线市场上与芭比美容产品的搜索量急剧上升。芭比娃娃成为许多人共有的童年记忆,也成为了独树一帜的文化标志。 TikTok标签观看量破347亿次!芭比妆容蕴藏巨大商机! 英国…

麒麟信安携手兆芯、信创桥发布信创联合解决方案,合力推动行业信创加速落地

近年来,加快构建自主创新基础软硬件生态已成为保障我国信息安全的重要一环,优先选择基于自主安全技术路线的国产芯片、操作系统等基础软硬件及关键业务应用软件已成为行业共识。但由于当前wintel体系下的部分复杂应用暂时难以迁移至自主平台,…

Java BIO、NIO、AIO

操作系统中的 I/O 以上是 Java 对操作系统的各种 IO 模型的封装,【文件的输入、输出】在文件处理时,其实依赖操作系统层面的 IO 操作实现的。【把磁盘的数据读到内存种】操作系统中的 IO 有 5 种: 阻塞、 非阻塞、【轮询】 异步、 IO复…

Linux-Shell

1.什么是Bash shell(壳) Bash Shell是一个命令解释器,它在操作系统的最外层,负责用户程序与内核进行交互操作的一种接口,将用户输入的命令翻译给操作系统,并将处理后的结果输出至屏幕。 通过xshell连接,就是打开了一…

精益生产管理工具有哪些?3大必备的精益管理软件!

​企业往往需要管理成千上万的数据,并保证整个管理过程的效率和质量,因此企业往往需要用到一些高效的管理软件,以应对管理过程中的各种问题。今天针对这个问题,与大家分享3大必备的精益管理软件,相信你在工作中一定能用…

为什么新版内核将进程pid管理从bitmap替换成了radix-tree?

第一次写进程创建的时候我使用的内核版本还是 3.10 的版本。在这个版本里已分配的进程 pid 号是用 bitmap 来存储的。但在 5.4 和 6.1 版本里,发现进程 pid 号管理实现已经从 bitmap 替换成了基数树(radix-tree)。后来翻了下版本更新历史&…

springboot项目新增子module

1. 拉取项目 2. file-new-module 3. 选择版本 4. 1-2-3-4 5. 注释请求统一前缀 (SwaggerConfig.java)

CSDN增加挂饰

就是添加一些代码即可&#xff1a; 添加代码&#xff1a; <div> <p> </p><span style"color:#A67D3D;">个人网站&#xff1a;</span> <img src"https://dezeming.top/wp-content/uploads/2022/07/Dezeming-261x300.png"…

UE使用UnLua(二)

1.前言 最近也是比较忙&#xff0c;忘了来更新了&#xff0c;好多都是开了头断更的&#xff08;狗头&#xff09;&#xff0c;今天抽空再更一篇&#xff01;&#xff01; 这篇讲一下在UnLua中覆盖蓝图事件&#xff08;函数&#xff09;&#xff0c;及按钮、文本控件的一些使用…

多线程———生产者和消费者(等待唤醒机制)彻底理解以及代码实现

目录 一、何为等待唤醒机制(生产者消费者模式)&#xff1f; 如何实现等待唤醒机制&#xff1f; 二、等待唤醒机制(生产者消费者模式)代码实现&#xff1a; 1、生产者代码&#xff1a; 2.桌子代码&#xff08;控制生产者和消费者&#xff09;&#xff1a; 3.消费者代码&am…

Simulink仿真模块 - Bus Selector

us Selector:从传入总线中选择元素 在仿真库中的位置为:Simulink / Commonly Used Blocks Simulink / Signal Routing HDL Coder / Signal Routing 模型为: 说明 Bus Selector 模块输出您从输入总线选择的元素。该模块可以单独输出所选的各元素或在一个新的虚拟总线中输出所…

浅谈智能电容器在低压配电网末端的应用

安科瑞 华楠 摘要&#xff1a;电容器优化配置和投切是配电网络优化的一项重要内容。电容器优化配置&#xff0c;侧重对电容器优化投切的各种算法进行了详细评述&#xff0c;分析了各种算法的特点及存在的问题&#xff0c;以促进该研究领域的进一步发展。 关键词&#xff1a;电…

uniapp 微信小程序 页面+组件的生命周期顺序

uniapp 微信小程序 页面组件的生命周期顺序 首页页面父组件子组件完整顺序参考资料 首页 首页只提供了一个跳转按钮。 <template><view><navigator url"/pages/myPage/myPage?namejerry" hover-class"navigator-hover"><button ty…

15、PHP神奇的数组索引替代

1、有数字索引指定的数组元素时&#xff0c;以数字索引的为准。 <?php $aarray(a,b,1>c,5>"d","e"); print_r($a); ?> 输出结果&#xff1a;b的位置直接被c替代了&#xff0c;e 的值为最大的整数索引1。 PHP不这么搞&#xff0c;怎么可能成…

微信怎么弄定时提醒时间?微信怎样设置日程提醒?

微信在社交应用中的地位举足轻重&#xff0c;几乎上每个使用智能手机的人都拥有一个微信号&#xff0c;方便和朋友、家人、同事进行信息的交流。对于不少网友来说&#xff0c;手机上每天接收的各类消息很多&#xff0c;但是唯独不能错过微信消息提醒&#xff0c;所以就想要让微…

【算法训练营】字符串转成整数

字符串转成整数 题目题解代码 题目 点击跳转: 把字符串转换为整数 题解 【题目解析】&#xff1a; 本题本质是模拟实现实现C库函数atoi&#xff0c;不过参数给的string对象 【解题思路】&#xff1a; 解题思路非常简单&#xff0c;就是上次计算的结果10&#xff0c;相当于10…