React单页应用使用Fetch API访问自签名HTTPS服务能否忽略SSL验证？

首先明确：这种操作仅适用于本地开发测试场景，生产环境绝对不能这么做——禁用SSL验证会彻底失去HTTPS的安全保障，导致你的应用暴露在中间人攻击、数据泄露等严重风险中。

下面分两种场景给你具体方案：

一、浏览器端运行的React应用（纯前端） #

浏览器本身的Fetch API没有提供跳过SSL验证的参数，因为浏览器的安全机制不允许前端代码直接绕过证书校验。这里有两个可行的开发环境方案：

方案1：让浏览器信任你的自签名证书（推荐） #

这是比“忽略验证”更安全的方式，操作步骤如下：

• 导出你的自签名证书为.crt格式（一般从微服务的配置文件或服务器设置中可以获取）
• 打开浏览器的证书管理页面（比如Chrome：设置 → 隐私和安全 → 安全 → 管理证书）
• 切换到“受信任的根证书颁发机构”标签，导入刚才的.crt文件，按照提示完成信任设置
• 重启浏览器后，再访问你的微服务，SSL验证就会自动通过了

方案2：通过开发服务器代理转发请求 #

如果不想修改浏览器设置，可以借助React开发服务器的代理功能，让请求先经过本地服务器转发，在服务器层面跳过SSL验证。

以Create React App为例：

1. 安装代理依赖（新版CRA可能已内置，若没有则执行npm install http-proxy-middleware --save-dev）
2. 在项目的src目录下新建setupProxy.js文件，添加以下配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 替换成你的API请求前缀
    createProxyMiddleware({
      target: 'https://your-self-signed-service-url.com', // 你的微服务地址
      changeOrigin: true,
      secure: false, // 关键：禁用SSL验证
      // 可选：如果微服务没有/api前缀，这里可以重写路径
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};

3. 重启React开发服务器，之后你的Fetch请求就可以指向/api/xxx，请求会被代理转发到微服务，并且自动跳过SSL验证。

二、Node.js环境中的Fetch（比如SSR、本地脚本） #

如果是在Node环境下使用Fetch（比如用node-fetch库），可以通过配置HTTPS Agent来跳过验证：

const fetch = require('node-fetch');
const https = require('https');

// 创建一个禁用SSL验证的Agent
const agent = new https.Agent({
  rejectUnauthorized: false
});

// 发起请求时指定这个Agent
fetch('https://your-self-signed-service-url.com/api/xxx', { agent })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

同样，这个方法仅限开发环境使用。

重要提醒：生产环境一定要使用由正规CA机构颁发的SSL证书，绝对不能禁用SSL验证，否则会给你的应用和用户带来极大的安全隐患。

内容的提问来源于stack exchange，提问作者Jakim