本地后端调试线上网页https的方法

简介

这里记录下本地后端调试线上网页https的方法。
起因是需要线上调试个后端接口，后端是本地服务起的http，在线页面发送的是https。

流程

1、首先需要类似xswitch代理软件，这里谷歌插件很多就不再赘述。可以把请求302到你想要的地方。

2、有了转发但是无法直接通信，面临2个问题。一个是http和https无法直接通信，一个是浏览器有跨域，本地起的是localhost和线上域名不符。这2个问题可以统一通过一个https的转发服务来解决。

HTTPS转发服务

1、由于https需要有证书，我们本地调试需要个证书证明我是localhost即可，所以需要使用openssl生成，openssl地址：https://slproweb.com/products/Win32OpenSSL.html?spm=5176.28103460.0.0.297c5d27tY1fd1
2、安装后使用命令生成本地证书

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout key.pem -out cert.pem -subj "/C=CN/ST=State/L=City/O=Organization/OU=OrgUnit/CN=localhost"

3、导入证书到浏览器
4、开启node环境下信任https

Windows（命令提示符）：
Cmd
深色版本
set NODE_TLS_REJECT_UNAUTHORIZED=0
Windows（PowerShell）：
Powershell
深色版本
$env:NODE_TLS_REJECT_UNAUTHORIZED = "0"
Linux/macOS：
Bash
深色版本
export NODE_TLS_REJECT_UNAUTHORIZED=0

5、编写https代理服务器，注意需要额外添加跨域响应头：

#!/usr/bin/env node
const argv = require("yargs").argv;
const httpProxy = require("http-proxy");
const fs = require("fs");
const path = require("path");

var proxy = httpProxy
	.createServer({
		target: {
			host: "localhost",
			port: 3000,
		},
		ssl: {
			cert: fs.readFileSync(
				path.resolve(__dirname, "./cert.pem"),
				"utf8"
			),
			key: fs.readFileSync(path.resolve(__dirname, "./key.pem"), "utf8"),
		},
		ws: true,
		secure: true,
	})
	.listen(8000, () => {
		console.log("Proxy https in 8000 ,listen " + 3000);
	});
// 监听proxyRes事件以修改响应头
proxy.on("proxyRes", (proxyRes, req, res) => {
	// 添加CORS头部
	res.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有来源访问，生产环境中应指定具体域名
	res.setHeader(
		"Access-Control-Allow-Methods",
		"GET, POST, PUT, DELETE, OPTIONS"
	);

	// 确保包含所有需要的自定义头部
	const existingHeaders = res.getHeader("access-control-allow-headers") || "";
	const allowedHeaders = Array.isArray(existingHeaders)
		? existingHeaders.join(", ")
		: existingHeaders;

	res.setHeader(
		"Access-Control-Allow-Headers",
		`${allowedHeaders}, Content-Type, Authorization, X-ASGARD-HEADER`
	);
	console.log(res, "sdjjsd");
	// 如果你需要支持预检请求（OPTIONS），可以在这里处理
	if (req.method === "OPTIONS") {
		res.writeHead(200);
		res.end();
	}
});

// 处理客户端发起的OPTIONS请求（预检请求）
proxy.on("error", (err, req, res) => {
	console.error("Proxy error:", err);
	res.writeHead(500, {
		"Content-Type": "text/plain",
	});
	res.end("Something went wrong.");
});

这个也可以增加请求头：

// 监听proxyReq事件以修改转发到目标服务器的请求头
proxy.on('proxyReq', (proxyReq, req, res, options) => {
  // 添加自定义请求头
  proxyReq.setHeader('X-ASGARD-HEADER', 'your-custom-value');

  // 如果有需要，还可以修改其他请求属性
  // proxyReq.setHeader('Another-Custom-Header', 'another-value');
});

6、先访问任意本地get接口，浏览器点击信任，之后就可以了。