使用OpenWeatherMap API时CORS预检请求405错误问题排查

核心原因 #

你遇到的问题根源在于GET请求完全不需要设置Content-Type: application/json头，这个多余的设置会触发CORS预检请求，而OpenWeatherMap的API服务器不支持处理OPTIONS类型的预检请求，因此返回405（Method Not Allowed）错误。

详细解释 #

1. CORS预检触发规则：
   浏览器的同源策略规定，当请求不符合「简单请求」条件时，会先发送OPTIONS预检请求，确认服务器是否允许该跨域请求。其中，Content-Type: application/json不属于简单请求允许的Content-Type值（简单请求仅允许text/plain、multipart/form-data、application/x-www-form-urlencoded），所以你的请求触发了预检。

2. 服务器端的问题：
   从你提供的预检响应头可以看到，虽然返回了Access-Control-Allow-Methods: GET, POST，但服务器实际没有配置处理OPTIONS请求的逻辑——它的API端点只接受GET/POST方法，因此OPTIONS请求直接被拒绝，返回405状态码。

3. GET请求的Content-Type无意义：
   GET请求本身没有请求体，Content-Type头是用来描述请求体格式的，所以给GET请求设置这个头完全是画蛇添足。

解决办法 #

直接去掉请求配置中的Content-Type头即可，修改后的代码如下：

const url='https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=hidden_key_obvs';
const response=await fetch(url, {method: 'get', mode: 'cors'});
// 直接用内置方法解析响应
const data = await response.json();

这样请求会被视为「简单请求」，无需触发预检，就能正常获取数据，也不需要用JSON.parse()做临时处理。

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