浏览器端代理proxy 解决跨域

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

直接上代码

javascript 复制代码
// 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

参考链接:

相关推荐
酷炫码神8 小时前
Day 10|Pinia 状态管理:把散落在各组件的数据,收进一个全局仓库
android·开发语言·javascript
酷炫码神10 小时前
Day 8|Vue3 响应式:告别手动操作 DOM,让数据驱动界面
javascript·vue.js·ecmascript
码林鼠11 小时前
flutter状态管理入门教程-Riverpod
开发语言·javascript·flutter
互影派11 小时前
分享:Cocos 互动影游一套代码双端分发(Web H5 + Windows/Steam)实践
javascript
Amos_Web12 小时前
Markdonw语法
开发语言·前端·javascript
全栈项目管理程序猿12 小时前
ArcGIS JS 基础教程(34):体元系列 - 等值面 VoxelIsosurface
前端·javascript
SensorFlow12 小时前
离页埋点:sendBeacon 返回 true,为什么还不能算接收成功
javascript
兔子零102412 小时前
架构师最危险的能力:用正确的技术,做出错误的架构决策
前端·javascript·后端
Bug收容所13 小时前
Vue+js Day2
前端·javascript·vue.js
掘金酱13 小时前
带着作品来,坐下来聊|掘金 X-lab · Coffee Talk 邀请你来见一面
前端·javascript·后端