React.js中使用Axios发起请求遭遇Cross-Origin Request Blocked问题求助

这种毫无代码变更却突然出现的CORS问题确实挺闹心的，结合你的情况，我给你梳理几个优先排查的点：

1. 确认CORS中间件的执行顺序与有效性 #

Express的中间件是按注册顺序执行的，如果你在app.use(cors())之后才定义路由，那没问题，但如果路由定义在cors中间件之前，请求会先被路由处理，根本走不到CORS逻辑，就会报错。

• 检查你的index.js，确保app.use(cors())放在所有路由、app.use(bodyParser...)这类中间件的最前面（至少要在路由之前）。
• 可以给CORS中间件加个日志验证是否被触发：

  app.use(cors(), (req, res, next) => {
    console.log("CORS middleware processed this request");
    next();
  });
  

  重启服务后发起请求，看服务器控制台有没有打印这条日志，如果没有，说明中间件没被正确加载。

2. 排查服务器端的网络/可用性问题 #

浏览器返回的CORS request did not succeed有时候会误导人——它可能不是真正的跨域规则问题，而是服务器本身不可达或者返回了错误。

• 用curl直接测试API，跳过浏览器的CORS检查：

  curl -v https://appbk.myweb.com/api/v1/user/ \
    -H "id: YOUR_ACTUAL_ID" \
    -H "time: YOUR_TIMESTAMP" \
    -H "token: YOUR_SIGNATURE" \
    -H "Content-Type: application/json"
  

  如果curl返回超时、5xx错误或者4xx错误，那问题根源在服务器（比如防火墙屏蔽了你的IP、服务崩溃、证书过期），而不是CORS配置。

3. 检查浏览器端的干扰因素 #

• 清空浏览器缓存，或者用隐私/无痕模式重新测试——旧的缓存可能残留了错误的CORS策略。
• 暂时禁用所有浏览器插件（比如AdBlock、隐私防护类插件），这类插件经常会拦截跨域请求，尤其是自定义头的请求。

4. 验证HTTPS证书有效性 #

你的API用的是HTTPS，如果服务器的SSL证书过期、不被浏览器信任，也会导致CORS请求失败：

• 直接在浏览器地址栏访问https://appbk.myweb.com/api/v1/user/，看看地址栏有没有证书警告，检查证书的有效期和信任链。

5. 显式允许自定义请求头 #

你在请求里带了id、time、token这些自定义头，默认的CORS配置可能没有允许这些头，试试显式声明：

app.use(cors({
  allowedHeaders: ['id', 'time', 'token', 'Content-Type']
}));

重启服务后再测试，看是否解决问题。

6. 检查服务器依赖与服务状态 #

• 登录云服务器，进入项目目录，执行npm list cors确认cors依赖是否存在（会不会不小心被删除了）。
• 重启Express服务，有时候服务重启后会解决一些隐性的加载问题。

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