使用 node.js 开发前端跨域代理服务

什么是跨域？当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

为什么会出现跨域问题？出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

打开 cmd 窗口，切换到 D:\proxyServer 目录

npm install express

npm install http-proxy-middleware

npm init -y 

在proxyServer文件夹，新建 proxyServer.js，内容如下：

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
 
const app = express();
//设置跨域访问
app.all("*", function (req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers", "Content-Type,Authorization");        //content-type
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == "options") res.send(200);
  //让options尝试请求快速结束
  else next();
});

//这个链接是 福州市电子信息 企业二级节点
app.use(
  "/api",
  createProxyMiddleware({
    target: "https://www.fzcitln.cn",
    changeOrigin: true,
    pathRewrite: {
      "^/api": "",     //rewrite path
    },
  })
);

//这个端口号就是proxy运行的端口号
app.listen(3000, () => {
  console.log(`启动代理服务器=> http://127.0.0.1:3000`);
}); 

新建 run_proxy_server.bat 启动脚本，内容如下：

title=启动proxyServer代理服务

@echo off
cd /d %~dp0
node proxyServer.js
echo over

保存文件，运行 bat 脚本，前端跨域代理服务就启动成功了。