React版Authorize.NET AcceptJS开发环境遇HTTPS错误求助

下面是几个无需修改业务逻辑就能解决问题的方案：

• 给本地React项目启用HTTPS
  如果你的React项目是用Create React App搭建的，直接修改package.json中的启动命令，加入HTTPS环境变量：

  "scripts": {
    "start": "HTTPS=true react-scripts start"
  }
  

  启动后React项目会运行在https://localhost:4200，首次访问浏览器会提示证书不安全，手动信任即可。

• 给本地API服务器启用HTTPS
  以Node.js/Express为例，改用https模块启动服务，搭配自签名证书：

  1. 用openssl生成自签名证书（或用mkcert工具简化操作）：

     openssl req -nodes -new -x509 -keyout server.key -out server.cert
     

  2. 修改API服务器代码：

     const https = require('https');
     const fs = require('fs');
     const express = require('express');
     const app = express();
     
     const sslOptions = {
       key: fs.readFileSync('./server.key'),
       cert: fs.readFileSync('./server.cert')
     };
     
     https.createServer(sslOptions, app).listen(8080, () => {
       console.log('API server running on https://localhost:8080');
     });
     

  同样需要在浏览器中信任该证书。

• 用反向代理统一HTTPS入口
  用nginx或类似工具做反向代理，将一个HTTPS端口的请求分别转发到React和API服务：
  示例nginx配置：

  server {
    listen 443 ssl;
    server_name localhost;
  
    ssl_certificate /path/to/your/cert.crt;
    ssl_certificate_key /path/to/your/cert.key;
  
    # 转发React请求
    location / {
      proxy_pass https://localhost:4200;
      proxy_set_header Host $host;
    }
  
    # 转发API请求
    location /api {
      proxy_pass https://localhost:8080;
      proxy_set_header Host $host;
    }
  }
  

  之后通过https://localhost访问前端，API请求也走HTTPS，完全符合AcceptJS的要求。

这些方案都不需要添加大量条件判断代码绕开信用卡逻辑，只需让开发环境满足HTTPS要求即可正常走流程。

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