ReactJS使用POST和GET发起跨域请求时遭遇405错误

你踩了Skyscanner API的一个常见坑——它的会话后续GET接口本质上是为服务器端调用设计的，浏览器端直接发起请求会被同源策略拦截，靠CORS扩展或修改hosts文件根本绕不过核心限制，下面给你几个可行的解决方案：

1. 搭建后端代理（最可靠的生产级方案） #

浏览器的同源策略限制前端直接请求第三方API，你需要一个自己的后端服务作为中间层，由后端去调用Skyscanner的API，前端只和自己的后端通信。这里给你一个Node.js + Express的极简示例：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 前端调用这个接口来创建会话并获取航班数据
app.post('/api/skyscanner/flights', async (req, res) => {
  try {
    // 第一步：POST创建会话
    const sessionResponse = await axios.post('https://partners.api.skyscanner.net/apiservices/v3/flights/search/create', req.body, {
      headers: {
        'Content-Type': 'application/json',
        'api-key': '你的API密钥'
      }
    });
    // 提取会话URL
    const sessionUrl = sessionResponse.headers.location;

    // 第二步：GET获取航班数据
    const flightResponse = await axios.get(sessionUrl, {
      headers: {
        'api-key': '你的API密钥'
      }
    });

    // 返回数据给前端
    res.json(flightResponse.data);
  } catch (error) {
    res.status(error.response?.status || 500).json({ error: error.message });
  }
});

app.listen(3000, () => console.log('代理服务运行在http://localhost:3000'));

前端只需要请求http://localhost:3000/api/skyscanner/flights，完全不会有跨域问题。

2. 检查API密钥的权限配置 #

登录Skyscanner开发者后台，确认你的API密钥是否允许浏览器端调用。很多API密钥默认是仅限服务器端的，即使你绕了CORS，Skyscanner的服务器也会拒绝你的请求，返回权限错误。

3. 关于CORS扩展的正确用法（仅开发环境临时用） #

如果你只是想在本地开发时快速测试，确保你的CORS扩展是完全启用的，并且在浏览器的隐私模式下测试（避免缓存的同源策略规则干扰）。但记住：这种方法绝对不能用于生产环境，因为它会破坏浏览器的安全机制，而且用户的浏览器不会安装这个扩展。

为什么修改hosts文件没用？ #

hosts文件只是修改域名的IP解析，和CORS的核心机制无关。CORS是由服务器返回的Access-Control-Allow-Origin等响应头决定的，Skyscanner的API服务器不会给前端请求返回这些头，所以改hosts根本解决不了问题。

内容的提问来源于stack exchange，提问作者S. N