React调用Cryptonator API返回503错误 浏览器直接访问正常

首先明确几个核心规则，之前所有尝试失效都和这些约束有关：

• 浏览器地址栏直接访问接口能正常返回，是因为地址栏发起的是顶级导航请求，既不受CORS规则约束，浏览器也会自动带上完整的合规请求头，不会触发反爬拦截，和XHR/fetch发起的前端跨域请求场景完全不同。
• mode: 'no-cors' 配置完全无法满足获取接口数据的需求：该模式下浏览器返回的是不透明响应（opaque response），前端无法读取响应体、也拿不到准确的响应状态，你看到的503不是接口真实返回的业务状态，是不透明响应的默认表现。
• 前端代码里手动加User-Agent、Cookie等请求头无效：浏览器有明确的安全限制，禁止前端JS修改这类保留请求头，不管你在fetch配置里写什么值，都会被浏览器自动覆盖；跨域场景下非简单请求的Cookie也不会默认携带。Postman作为独立HTTP客户端不受浏览器安全规则限制，所以改头能生效，两者运行环境有本质区别，不能直接照搬配置。
• package.json里的简单proxy配置不生效：Create React App默认的简单代理不会修改请求源标识、也不会补全反爬校验需要的请求头，Cryptonator的反爬策略识别到请求来自代理工具后会直接拦截返回503。

开发环境调试方案 #

不要用package.json的简单proxy配置，改用可自定义规则的代理中间件：

1. 先安装依赖：
   npm install http-proxy-middleware --save-dev
2. 在src目录下新建setupProxy.js文件，写入如下配置，CRA会自动识别加载该文件，不需要额外修改webpack配置：

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

module.exports = function(app) {
  app.use(
    '/crypto-proxy',
    createProxyMiddleware({
      target: 'https://api.cryptonator.com',
      changeOrigin: true,
      pathRewrite: {
        '^/crypto-proxy': '',
      },
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
        'Referer': 'https://api.cryptonator.com/',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
      },
      followRedirects: true,
    })
  );
};

3. 接口请求改为相对路径调用即可：

fetch('/crypto-proxy/api/ticker/btc-usd')
.then(res => res.json())
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err)
})

该方案的原理是请求会先发到本地开发服务器，由Node端发起对Cryptonator的请求，不存在浏览器CORS限制，同时可以自由修改请求头绕过反爬拦截。

生产环境方案 #

生产环境不能依赖CRA的开发代理，必须自行搭建一层后端代理服务（可以用Node/Express/Nginx等任意服务端技术实现），逻辑和上面的开发代理一致：

• 前端只请求你自己部署的服务端接口
• 服务端收到请求后，带上正确的请求头向Cryptonator发起请求
• 服务端拿到Cryptonator的返回结果后，再透传给前端

服务端之间的HTTP请求不存在CORS限制，也没有浏览器的请求头修改限制，只要头信息匹配反爬规则就能正常拿到数据。
注意：纯静态前端部署（比如只把React build后的静态文件丢到CDN/对象存储）没有服务端能力，无法直接实现代理，必须搭配对应的后端服务才能正常调用该接口。

临时本地调试方案 #

如果只是临时本地调试不想配代理，可以安装浏览器CORS禁用插件，临时关闭对应站点的CORS校验，直接调用接口即可。注意这个方案仅适合本地自己调试用，不能用于面向用户的生产环境，插件开启期间不要访问其他站点，避免安全风险。

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