CRA项目调用第三方API遇CORS响应无法获取Token求助

核心问题与修复步骤 #

1. 未解析响应数据
   fetch返回的是Response对象，并非接口直接返回的JSON数据。你当前直接将Response实例赋值给token，所以控制台打印的是响应对象而非目标token。需要调用.json()方法解析响应体。

2. 请求体格式错误
   直接传递JS对象给body参数，fetch不会自动序列化。必须将对象转为JSON字符串，同时设置Content-Type: application/json请求头，否则后端无法正确解析参数。

3. CORS标识说明
   控制台显示type: 'cors'是浏览器跨域响应的正常标识，Postman能正常请求是因为它不受浏览器同源策略限制。只要后端配置了正确的CORS规则，前端处理好请求格式即可正常获取数据。

修正后的代码 #

useEffect(() => {
  const login = async () => {
    const bodyData = {
      username: "xxx@xxx",
      password: "xxx",
    };
    try {
      const response = await fetch(loginUrl, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(bodyData),
      });
      
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      
      const tokenData = await response.json();
      console.log(tokenData);
      return tokenData;
    } catch (error) {
      console.error('登录请求出错:', error);
    }
  }
  login();
}, [loginUrl])

额外注意事项 #

• 开发环境可通过CRA代理规避跨域：在package.json中添加"proxy": "https://api.s360web.com"，请求时使用相对路径/api/login。
• 若后端要求form-data格式，需用FormData构建请求体，而非JSON字符串，具体以接口文档为准。

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