React中处理第三方脚本加载额外资源及CORS报错问题

针对你用create-react-app集成Clover支付时遇到的开发环境CORS问题，以及代理后资源加载失败的情况，给你几个实用的解决思路：

1. 优先使用Clover官方开发配置 #

先去查Clover的开发者文档，看是否支持将本地开发域名加入跨域白名单，或者提供了专门的开发环境API端点。多数支付服务商都会为开发者提供这类配置，从根源上避免CORS问题，这是最稳妥的方案。

2. 精准代理token请求，不代理整个iframe域名 #

不要代理checkout.sandbox.dev.clover.com整个域名，只针对token请求做代理，这样iframe仍从原域名加载，不会破坏内部相对路径资源的加载：

步骤1：配置代理规则 #

在项目的src/setupProxy.js文件（没有就新建）中添加以下代码：

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

module.exports = function(app) {
  app.use(
    '/v1/tokens',
    createProxyMiddleware({
      target: 'https://token-sandbox.dev.clover.com',
      changeOrigin: true,
      pathRewrite: {
        '^/v1/tokens': '/v1/tokens'
      }
    })
  );
};

步骤2：动态切换token请求地址 #

在代码中根据环境变量判断，开发环境下使用本地代理路径，生产环境用原地址：

// 根据环境切换token请求端点
const tokenEndpoint = process.env.NODE_ENV === 'development' 
  ? '/v1/tokens' 
  : 'https://token-sandbox.dev.clover.com/v1/tokens';

// 将这个endpoint传入Clover的支付配置中

3. 用Nginx做本地反向代理（适合复杂场景） #

如果http-proxy-middleware满足不了需求，可以用Nginx搭建本地反向代理，通过自定义域名让iframe和token请求处于同一"域名"下：

步骤1：配置Nginx #

创建Nginx配置文件，示例如下：

server {
  listen 443 ssl;
  server_name clover.local;

  # 用自签名证书（本地开发用，可自行生成）
  ssl_certificate /path/to/your/cert.pem;
  ssl_certificate_key /path/to/your/key.pem;

  # 代理checkout iframe请求
  location / {
    proxy_pass https://checkout.sandbox.dev.clover.com;
    proxy_set_header Host checkout.sandbox.dev.clover.com;
  }

  # 代理token请求
  location /v1/tokens {
    proxy_pass https://token-sandbox.dev.clover.com;
    proxy_set_header Host token-sandbox.dev.clover.com;
  }
}

步骤2：配置本地hosts #

在系统hosts文件中添加一行：

127.0.0.1 clover.local

步骤3：启动React项目 #

用自定义域名启动开发服务器：

HOST=clover.local HTTPS=true npm start

这样浏览器访问https://clover.local时，iframe和token请求都走Nginx代理，浏览器会认为是同一域名，既解决CORS，也不会影响相对路径资源加载。

4. 临时禁用浏览器CORS（仅测试用） #

如果只是临时测试，可以启动浏览器时关闭CORS检查，比如Chrome：

chrome --disable-web-security --user-data-dir="/tmp/chrome_dev_session"

注意：这个方法不安全，只能用于本地开发测试，绝对不能用于生产环境。

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