Angular服务组件调用OpenWeatherMap POST接口失败求助

先从几个关键差异点入手，帮你定位问题：

1. 预检请求（OPTIONS）返回404的核心原因 #

浏览器发起跨域POST请求时，会自动发送OPTIONS预检请求，用来确认服务器是否允许该跨域操作。你的请求里OPTIONS返回404，大概率是两个原因之一：

• 你拼接的API端点路径有误
• OpenWeatherMap的/data/3.0/stations端点没有配置处理OPTIONS请求的路由

对比你Postman和Angular代码的请求URL：
Postman用的是完整路径http://api.openweathermap.org/data/3.0/stations?appid=xxx，但你的Angular代码里是this.servUrl + 'stations?appid=' + ...，先确认this.servUrl的值是不是http://api.openweathermap.org/data/3.0/？如果少了/data/3.0/这部分，直接请求/stations就会触发404。

2. Angular请求代码的优化点 #

你的代码里用了Angular旧版的Headers和RequestOptions，在Angular 4.3+之后官方推荐使用HttpClient配合HttpHeaders，虽然这不是导致404的直接原因，但可以让代码更简洁规范：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// ...

registerStation(registerWeatherStation: RegisterWeatherStation): Observable<any> {
  const url = `${this.servUrl}stations?appid=${this.weatherAppId}`;
  const headers = new HttpHeaders({
    'Content-Type': 'application/json; charset=utf-8'
  });
  
  console.log("Request body: ", registerWeatherStation);
  // HttpClient会自动序列化请求体，不需要手动JSON.stringify
  return this.http.post(url, registerWeatherStation, { headers });
}

3. 是否需要通过后端执行POST请求？ #

是的，这是更可靠的解决方案，原因有三：

• 如果确认API路径正确，但OPTIONS请求依然返回404，说明OpenWeatherMap的这个API可能不支持浏览器端的跨域请求（虽然响应头里有Access-Control-Allow-Origin: *，但预检路由缺失）
• 直接在前端暴露appid存在安全风险，很容易被恶意抓取滥用
• 后端转发请求可以彻底避免跨域问题，同时还能对请求做额外的校验、日志记录等处理

后端转发的简单示例（以Node.js/Express为例）： #

const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

app.post('/api/register-station', async (req, res) => {
  try {
    const appId = '你的OpenWeatherMap appid';
    const response = await axios.post(
      `http://api.openweathermap.org/data/3.0/stations?appid=${appId}`,
      req.body,
      { headers: { 'Content-Type': 'application/json' } }
    );
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || '请求失败');
  }
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

之后你的Angular代码只需要请求自己的后端接口/api/register-station即可。

总结一下：先优先检查servUrl的路径是否正确，若确认路径无误但跨域问题依然存在，建议通过后端转发请求，既解决跨域又提升安全性。

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