不用框架，本地启动接口代理

wade

发布于 2023-12-28 17:43:57

1020

发布于 2023-12-28 17:43:57

文章被收录于专栏：coding个人笔记coding个人笔记

跨域的问题已经是老生常谈了，解决的办法很多，现在几乎都用 webpack、vite 等工具，配置个代理，解决起来不要太容易。

当在一些很古早的项目，或者非常临时的，想要在项目里请求一下服务器的接口，这时候，很少有那么好的后端临时开启所有可跨域，需要前端自己解决。估计大部分都是直接跟后端说跨域，就是要接口层面解决，前端其实也是能做，只是很少有人去了解。

使用框架，无非就是本地启动了一个服务，转发了本地发起的请求，在没有使用框架的情况下，我们也可以使用 node，自己启动一个服务做代理。这边有一个前提：

静态访问是用本地服务，就是 localhost 访问（vscode 使用 live server 插件，或者全局安装 npm 包 anywhere/http-server）

先使用 Ajax 进行一个请求：

 $.ajax({

    url: "http://localhost:3000//bam/inbound/receipt/search-by-paging",

    headers: {

      'Authorization': "Basic aXRlbXNob3BAaXRlbS5jb206UGFzczEyMzQ1Ng==",

      "company-id": "Dff1",

      "x-channel": "WEB",

    },

    method: "POST",

    success: function (response) {

      console.log("items", response);

    },

  });

我们需要使用 http-proxy 这个包，所以要自己新建一个文件夹：

//在新建文件夹里面执行，-y是默认配置
npm init -y

npm i http-proxy

//新建一个文件proxy.js，文件名随便取
const http = require("http");
const httpProxy = require("http-proxy");

const proxy = httpProxy.createProxyServer({});

const server = http.createServer((req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, x-channel, company-id, authority"
  ); // 添加 x-channel 到允许的请求头列表

  if (req.method === "OPTIONS") {
    res.writeHead(200);
    res.end();
  } else {
    proxy.web(req, res, {
      target: "https://scm-stage.item.com",
      changeOrigin: true,
    });
  }
});

proxy.on("error", (error, req, res) => {
  console.error("Proxy Error:", error);
  res.writeHead(500, {
    "Content-Type": "text/plain",
  });
  res.end("Proxy Error");
});

server.listen(3000, () => {
  console.log("Proxy server listening on port 3000");
});

最后就是执行这个文件了，用 code runner 也好还是 node proxy.js 也好，启动了就行，接着就会直接进行代理转发了。

错误一，是代理那边请求允许的头部要加进去：

Access to XMLHttpRequest at 'http://localhost:3000//bam/inbound/receipt/search-by-paging' from origin 'http://127.0.0.1:5500'
has been blocked by CORS policy: 
Request header field company-id is not allowed by Access-Control-Allow-Headers in preflight response.

错误二，请求进行了 options 预请求，所以要单独配置 options 的情况：

Access to XMLHttpRequest at 'http://localhost:3000//bam/inbound/receipt/search-by-paging' from origin 'http://127.0.0.1:5500' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
It does not have HTTP ok status.

一些不用框架，或者临时使用的话，还是蛮好用的，当作一个项目放着，用的时候就启动，甚至可以放到自己所在的项目里面，当作工具用。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2023-12-21，如有侵权请联系 cloudcommunity@tencent.com 删除

代理