前端（包含cocosCreator）开发环节调取后端接口时跨域，解决办法之反向代理

爱你的魔

已于 2024-09-14 15:38:25 修改

阅读量681

点赞数 1

分类专栏： cocosCreator组件文章标签： cocosCreator

于 2024-05-16 10:01:57 首次发布

本文链接：https://blog.csdn.net/weixin_42253927/article/details/138946622

版权

cocosCreator组件专栏收录该内容

17 篇文章 0 订阅

订阅专栏

/** eslint-disable */
var http = require('http'),
  httpProxy = require('http-proxy'),
  HttpProxyRules = require('http-proxy-rules');

// Set up proxy rules instance
var port = 9090
var proxyRules = new HttpProxyRules({
  rules: {
    '/api/(.*)': 'https://baidu.com/$1', // 测试环境游戏服务
  },
  default: 'https://baidu.com', // default target
});

// Create reverse proxy instance
var proxy = httpProxy.createProxy({ autoRewrite: true, changeOrigin: true });

// Create http server that leverages reverse proxy instance
// and proxy rules to proxy requests to different targets
http
  .createServer(function (req, res) {
    // a match method is exposed on the proxy rules instance
    // to test a request to see if it matches against one of the specified rules
    var target = proxyRules.match(req);
    console.info({ target });
    if (target) {
      // 设置跨域头
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:7456');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, App-Info, X-Device, Session');
      // 检查请求是否为预检请求
      if (req.method === 'OPTIONS') {
        // 返回 HTTP OK 状态码（200）以满足预检请求的要求
        res.writeHead(200);
        res.end();
        return;
      }
      return proxy.web(req, res, {
        target: target,
      });
    }


    res.writeHead(500, { 'Content-Type': 'text/plain' });
    res.end('The request url and path did not match any of the listed rules!');
  })
  .listen(port);

console.info('======proxy on localhost: ' +port + '======');
console.info('===proxy table===');
console.info({
  rules: {
    '/api/(.*)': 'https://baidu.com/$1', // 测试环境游戏服务
  },
  default: 'https://baidu.com', // default target
});

用后端给的接口前缀来代替代码中的：：：：：： https://baidu.com
即可监听本地的http://localhost:7456/ 中带api关键字的访问，反向代理到后端服务器

原理是：

前端和后端不在同一个服务器域名下，会造成跨域阻拦。
后端和后端的访问不管是不是同源环境，是不是一个域名下，都不会有跨域阻拦。
node.js起一个简单的后端服务，将前端对后端的跨域访问，先通过node服务和本地前端都是本地的同源关系正常访问node服务，node反向代理到跨域的后端服务上成服务器之间的访问。

解决办法常用的就是如上，还可以找后端将服务器改为不阻止跨域，后端没安全感，一般不干。