前端使用node服务器+http-proxy-middleware中间件解决跨域问题

1997mhy

var express = require('express'); //express中间件，用来快速的创建一个node服务器。
var cors = require('cors');//用来解决跨域的中间件
const { createProxyMiddleware } = require('http-proxy-middleware');//用来代{过}{滤}理请求的中间件
var app = express();

//设置跨域访问1 start
/* 为什么在这里还需要解决跨域？这个node服务不就是使用代{过}{滤}理中间件来解决跨域的吗？原因：虽然此node服务请求代{过}{滤}理的服务器，不会跨域，
  但是当你写的页面的接口请求这个node服务器的时候也会跨域，所有需要先解决页请求到此node的跨域问题。
        如果是vue或者react项目的话，webpack就可以直接进行配置代{过}{滤}理服务器，不用这么麻烦。
  */
app.all('*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        res.header("X-Powered-By",' 3.2.1');
        res.header("Content-Type", "application/json;charset=utf-8");
        next();
});
//设置跨域访问1 end

//设置跨域访问2 statrt,和设置跨域访问1功能好像一样
//  app.use(cors())
//设置跨域访问2 end

app.use((request,response,next)=>{
        console.log('有人请求服务器1了');
        console.log('请求来自于',request.get('Host'));
        console.log('请求的地址',request.url);
        next()
})

app.get('/students',(request,response)=>{ //用node写的普通接口
        const students = [
                {id:'001',name:'tom',age:18},
                {id:'002',name:'jerry',age:19},
                {id:'003',name:'tony',age:120},
        ]
        response.send(students)
})
/***************************** 开始启动反向代{过}{滤}理start1 **********************************/
const options = {
    target: 'http://10.0.3.88', // target host
    changeOrigin: true, // needed for virtual hosted sites
    ws: true, // proxy websockets
    pathRewrite: {
    //   '^/api/old-path': '/api/new-path', // rewrite path
    //   '^/api/remove/path': '/path', // remove base path
    '^/mhy': '',//把接口/mhy开头的/mhy替换为空。
    },
  };
  // create the proxy (without context)
  const exampleProxy = createProxyMiddleware(options);
  // mount `exampleProxy` in web server
  app.use('/mhy', exampleProxy); //请求接口以/mhy开头的路径需要进行代{过}{滤}理。
/***************************** 开始启动反向代{过}{滤}理end1 **********************************/


/***************************** 开始启动反向代{过}{滤}理start2 只是写法不同。 **********************************/

// app.use('/', createProxyMiddleware({
//     // 代{过}{滤}理跨域目标接口
//     target: 'http://10.0.3.88',
//     changeOrigin: true,

//     // 修改响应头信息，实现跨域并允许带cookie
//     onProxyRes: function(proxyRes, req, res) {
//         res.header('Access-Control-Allow-Origin', 'http://10.0.3.88'); //设置是否允许跨域访问，*代表所有地址都可以跨域访问
//         res.header('Access-Control-Allow-Credentials', 'true');
//     },

//     // 修改响应信息中的cookie域名
//     cookieDomainRewrite: 'http://10.0.3.88'  // 可以为false，表示不修改
// }));

/***************************** 开始启动反向代{过}{滤}理end2 **********************************/
app.listen(3000); //监听端口
console.log('服务器启动成功，端口在3000');

51shares

谢谢，学习了

Thshy

感谢楼主的分享，楼主一胎生九八个

no1314

Thshy 发表于 2021-11-25 16:00
感谢楼主的分享，楼主一胎生九八个

可以参考参考

52HHY

感谢楼主的分享