React.js中fetch API调用时Get方法转为OPTIONS问题求助

我来帮你搞定这个问题！你遇到的GET请求被自动转为OPTIONS的情况，其实是浏览器的CORS预检机制在起作用，咱们一步步拆解原因和解决方案：

为什么会出现OPTIONS请求？ #

当浏览器检测到你的请求满足以下两个条件时，会自动先发送一个OPTIONS预检请求，用来确认目标服务器是否允许跨域请求：

• 请求是跨域的（前端域名和API域名不一致）
• 请求包含了自定义HTTP头（比如你这里的Authorization），或者使用了非简单HTTP方法（GET属于简单方法，但带自定义头仍会触发预检）

如果服务器没有正确响应这个OPTIONS请求，浏览器就会阻止后续的GET请求，同时抛出跨域相关的错误。

解决方案步骤 #

1. 确认服务器端的CORS配置（最关键） #

这是问题的核心！服务器必须正确处理OPTIONS请求，并返回以下响应头：

• Access-Control-Allow-Origin: 设置为你的前端域名（比如https://your-frontend-domain.com），生产环境不建议用*，会和带身份验证的请求冲突
• Access-Control-Allow-Headers: 必须包含Authorization（因为你的请求带了这个头），可按需添加其他头
• Access-Control-Allow-Methods: 必须包含GET
• Access-Control-Max-Age: 可选，用来缓存预检结果，减少OPTIONS请求次数

如果服务器是你维护的，比如用Express框架，可通过cors中间件快速配置：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com',
  allowedHeaders: ['Authorization'],
  methods: ['GET', 'OPTIONS']
}));

若服务器不是你维护的，需联系后端团队调整CORS配置，确保支持你的跨域请求和自定义头。

2. 修正前端Fetch的配置 #

你的代码里有几个小问题，调整后能避免不必要的触发因素：

• 去掉Content-Type头：GET请求没有请求体，无需设置这个头，减少预检触发条件
• 规范头字段名：HTTP头字段名用标准写法（比如Content-Type而非contentType），避免潜在问题
• 完善响应处理逻辑：需先调用response.json()解析响应，还要处理HTTP错误状态码

修正后的代码示例：

dispatch(requestBegin());
const apiPath = `xxxx/TEST/appservice/api/app/10/10000127201901`;
return fetch(apiPath, {
  method: 'GET',
  headers: {
    "Authorization": `Basic ${btoa('xxx:xxx')}`,
  },
})
.then((response) => {
  // 处理HTTP错误状态码（如401、404等）
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})
.then((json) => {
  dispatch(getEventsEnds(json));
})
.catch((error) => {
  console.error('请求出错：', error);
  dispatch(getEventsEnds());
});

额外注意点 #

• 如果用户名/密码包含非ASCII字符，btoa会报错，可改用window.btoa(unescape(encodeURIComponent('xxx:xxx')))处理
• 生产环境不要硬编码账号密码，建议通过环境变量或安全方式注入

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