使用node反向代理解决开发环境和生产环境的跨域问题
2018-09-09 本文已影响0人
五年高考
有兴趣的小伙伴可以加Q群 879108483 互相学习
话不多说，直接开搞
- 新建文件夹，然后进入后初始化
npm init
// 然后一路回车
- 安装插件
npm install express http-proxy-middleware --save
或者
yarn add express http-proxy-middleware
- 在根目录里面新建proxy.js，写入如下代码
const express = require('express');
const proxy = require("http-proxy-middleware");
const app = express();
app.use('/apis/**',
proxy.createProxyMiddleware({
// 代理目标地址
target: "http://www.soso.com",
changeOrigin: true,
pathRewrite: {
// 地址重写
"/apis": "/"
}
}));
app.listen(8089, () => {
console.log("项目启动与：http://localhost:8089");
})
上面的意思呢 是监听8089端口，然后反向代理http://www.soso.com，我们用 node proxy.js 启动
然后访问 http://localhost:8089/apis/a,可以发现我们
已经访问到了 http://www.soso.com/a 反向代理成功
现在要测试一下这个能不能用
使用方法
- 新建server.js （写api用的）
var express = require('express');
var app = express();
app.get("/testapi", (req, res) => {
res.send({ data: "我来组成测试数据！" });
})
app.listen(8090, () => {
console.log("项目启动与：http://localhost:8090");
})
然后node server.js 启动服务，浏览器访问http://localhost:8090/testapi
可以看到返回来的数据{"data":"我来组成测试数据！"} 说明服务已经启动成功
2 新建 client.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
// 通过ajax 调用api
$.get("/apis/testapi", function (result) {
alert(JSON.stringify(result));
});
</script>
</body>
</html>
然后修改一下proxy.js
const express = require('express');
const proxy = require("http-proxy-middleware");
const app = express();
app.use('/apis/**',
proxy.createProxyMiddleware({
// 代理目标地址
// **修改了这里
target: "http://localhost:8090",
changeOrigin: true,
pathRewrite: {
// 地址重写
"/apis": "/"
}
}));
// **修改了这里
app.get("/", (req,res) => {
res.sendfile("./client.html");
})
app.listen(8089, () => {
console.log("项目启动与：http://localhost:8089");
})
重新启动 proxy.js (node proxy.js) ，访问地址 http://localhost:8089/ 发现已经调用api成功啦
如果在spa项目 比如vue react 中使用代理
在官方的脚手架中基本都带有跨域的解决方案，本例先不讲这个直接将当前的场景中怎么解决
- 启动vue/react，然后只需要在 proxy.js 中更改一点代码，新代理我们的react/vue启动的那个地址
就行啦，讲api和网页的两个域名代理到一个域来就不存在跨域了。
const express = require('express');
const proxy = require("http-proxy-middleware");
const app = express();
app.use('/apis/**',
proxy.createProxyMiddleware({
// 代理目标地址
target: "http://localhost:8090",
changeOrigin: true,
pathRewrite: {
// 地址重写
"/apis": "/"
}
}));
app.use("/",
proxy({
// 这里是vue/react启动后需要访问网页的地址
// **修改了这里
target: "http://localhost:3000",
changeOrigin: true,
}))
// app.get("/", (req, res) => {
// res.sendfile("./client.html");
// })
app.listen(8089, () => {
console.log("项目启动与：http://localhost:8089");
})
然后访问：http://localhost:8089 可以看到我们已经访问到了项目。在里面调用api的的时候要注意
，比如调用 http://localhost:8090/testapi ，我们已经代理了 http://localhost:8090这个域，
在调用的时候 url 只需要写上 /apis/testapi ，就可以正常访问到了
