React无API权限时如何解决RapidAPI的CORS跨域问题？

核心问题原因 #

你在请求头里加access-control-allow-origin: *完全没用——这个头是服务器返回给浏览器的响应头，不是前端请求时发送的。浏览器的CORS校验是检查服务器返回的响应中是否包含允许你当前域名（http://localhost:3002）的Access-Control-Allow-Origin头，和你请求里带的这个头无关。

另外，你直接用响应里返回的https://api.hybridgfx.com域名发起请求，这个是目标API的原始域名，对方服务器没有配置CORS允许你的前端域名；而浏览器直接访问该URL时，不属于跨域请求（是直接在地址栏访问，没有从其他域名的页面发起），所以不会触发CORS校验，能正常拿到数据。

解决方案 #

• 必须通过RapidAPI的代理域名发起请求
  你的请求头里已经指定了X-RapidAPI-Host: countries-states-cities-dataset.p.rapidapi.com，这才是RapidAPI提供的代理域名，所有请求（包括分页请求）都要通过这个域名发起，不能用响应里返回的原始域名。你需要解析响应中的分页URL，把域名替换为RapidAPI的代理域名。

• 删除无效的请求头
  去掉请求配置里的"access-control-allow-origin": "*"，这个头对解决CORS问题没有任何帮助。

修改后的完整代码 #

const fetchNextResults = async (url: string): Promise<FetchResponse> => {
  const options = {
    method: "GET",
    url: url,
    headers: {
      "X-RapidAPI-Key": MyKey,
      "X-RapidAPI-Host": "countries-states-cities-dataset.p.rapidapi.com",
      // 已删除无效的access-control-allow-origin头
    },
  };
  
  try {
    const response = await axios.request(options);
    console.log(response.data);
    
    // 处理分页URL（如果响应中包含下一页地址）
    if (response.data.next_page_url) {
      const correctedNextUrl = response.data.next_page_url.replace(
        "https://api.hybridgfx.com",
        "https://countries-states-cities-dataset.p.rapidapi.com"
      );
      // 可将correctedNextUrl保存，用于发起下一页请求
      console.log("下一页请求URL:", correctedNextUrl);
    }
    
    return response.data;
  } catch (error) {
    console.error(error);
    throw error; // 建议抛出错误让调用方处理，避免返回undefined
  }
};

额外说明 #

RapidAPI的核心作用之一就是作为代理，帮开发者处理跨域、API密钥管理等问题，所以所有请求都必须走他们的代理域名，不能直接访问目标API的原始地址。只要坚持用RapidAPI的Host域名发起请求，就能避免CORS错误。

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