能否从客户端/浏览器调用第三方API？以WeatherAPI场景为例

核心判断标准：API自身限制 #

能不能直接从浏览器发请求，主要看两个关键点：

• 跨域支持（CORS）：如果天气API的服务器配置了允许你的前端域名跨域，浏览器就能直接发起请求；没配置的话会触发跨域报错，只能走服务器转发。
• API密钥安全性：如果请求需要携带密钥（比如你示例里的RapidAPI密钥，一般在请求头中），直接写在前端代码里会导致密钥泄露，被恶意盗用，这种情况必须通过自己的服务器转发请求。

针对你给出的WeatherAPI示例分析 #

你提供的服务端请求示例，实际调用时需要添加X-RapidAPI-Key和X-RapidAPI-Host这类密钥信息。这类密钥绝对不能暴露在前端，所以这个API必须走服务器转发流程：

1. 客户端把经纬度发送到你的后端服务器
2. 后端服务器带上密钥，调用WeatherAPI获取数据
3. 后端把天气数据返回给客户端

完善后的服务端示例（包含经纬度参数与密钥） #

const axios = require("axios");

// 从客户端请求中获取经纬度，比如从req.query或req.body里拿
const clientLat = 39.9042;
const clientLon = 116.4074;

const options = {
  method: 'GET',
  url: 'https://weatherapi-com.p.rapidapi.com/current.json',
  params: { q: `${clientLat},${clientLon}` }, // 用经纬度拼接查询参数
  headers: {
    'X-RapidAPI-Key': '你的RapidAPI密钥',
    'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
  }
};

axios.request(options).then(function (response) {
    console.log(response.data);
    // 将数据返回给客户端
}).catch(function (error) {
    console.error(error);
});

客户端直连的可行场景 #

如果遇到无需密钥、且支持CORS的免费公开天气API，可以直接在前端调用，示例如下：

const lat = 39.9042;
const lon = 116.4074;

fetch(`https://example-free-weather-api.com/current?lat=${lat}&lon=${lon}`)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

内容的提问来源于stack exchange，提问作者k.m.