浏览器端代理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

参考链接:

相关推荐
meilindehuzi_a1 分钟前
深入理解 JavaScript 的同步与异步机制:从单线程设计到 Promise 核心应用
开发语言·javascript·ecmascript
如烟花的信页3 分钟前
加速乐cookie逆向分析
javascript·爬虫·python·js逆向
永远的WEB小白8 分钟前
css改变svg图标的颜色
前端·javascript·css
ikoala28 分钟前
Codex 不得不装的 12 个插件,都在这了
前端·javascript·后端
赵庆明老师1 小时前
JS检查提交的文件是否合规
开发语言·前端·javascript
颂love1 小时前
Vue的两大生态以及组件通信
前端·javascript·vue.js·typescript
光影少年2 小时前
js单线程,为什在node环境下的js可以处理高并发请求?
前端·javascript·掘金·金石计划
moMo2 小时前
# JavaScript 的“等等我”:聊聊同步与异步
javascript
Cobyte2 小时前
19.Vue Vapor 的实现原理原来这么简单
前端·javascript·vue.js
JackieDYH2 小时前
uniapp vue3 常用的生命周期和作用使用时机
javascript·vue.js·uni-app