使用Axios调用REST API时，localhost发起GET请求遭拒如何解决？

核心问题分析 #

你犯了一个跨域配置的常见错误：Access-Control-Allow-Origin是服务器返回的响应头，不是前端可以通过请求头设置的字段。浏览器的跨域规则要求，必须由目标API服务器在响应中主动返回这个头，前端在请求里添加它完全无效，浏览器甚至不会把这个头发送给服务器。

你的代码修正点 #

• 立即移除请求头中的"Access-Control-Allow-Origin": "*"，这个配置毫无意义
• crossDomain: true是Axios的顶层配置项，不是请求头字段，要移到headers对象外面
• GET请求默认不需要设置Content-Type: text/plain;charset=utf-8，除非目标API明确要求，否则可以删除该配置

修正后的代码 #

axios
  .get(url, {
    crossDomain: true, // 放在顶层配置中
    params: {
      access_key: API_KEY,
      adults: adults,
      origin: origin,
      destination: destination,
      departure: departure,
    },
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch(err => {
    console.error('请求失败:', err);
  });

真正解决跨域的方案 #

1. 服务器端配置：联系API提供者，让他们在响应中添加Access-Control-Allow-Origin头，值设为你的前端域名（比如https://your-frontend.com）或者允许所有域名的*
2. 前端代理：如果无法修改服务器配置，本地开发时可以用前端框架的代理工具（如Vue的devServer.proxy、React的setupProxy），上线时用Nginx做反向代理，将前端请求转发到目标API，绕过浏览器的跨域限制

内容的提问来源于stack exchange，提问作者A N D E U S