You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

调用第三方API的最优CORS解决方案?Axios+Express配置遇阻

解决Express+CORS+Axios第三方API调用的跨域问题

看起来你搞混了CORS配置的作用范围——你的Express服务器的CORS设置只针对前端访问你的服务器生效,而不是让你直接绕过第三方API的跨域限制。浏览器拦截的是前端直接请求https://api.abalin.net的请求,因为这个第三方服务器没有返回允许http://localhost:3000Access-Control-Allow-Origin头,这不是你在自己服务器上设置CORS能解决的。

正确的做法是用你的Express服务器做代理层:前端请求你的Express接口,然后由你的Express后端用Axios去调用第三方API,再把结果返回给前端。因为后端请求第三方API不受浏览器同源策略限制,这样就能避开CORS问题。

具体实现步骤

1. 正确配置Express的CORS(允许前端访问你的服务器)

首先确保你的Express服务器能被前端正常访问,配置好CORS:

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

// 开发环境可以直接允许所有域名,生产环境建议指定具体前端域名
app.use(cors());

// 也可以用更精细的配置(可选)
// app.use(cors({
//   origin: 'http://localhost:3000',
//   methods: ['GET', 'POST', 'OPTIONS']
// }));

2. 创建代理接口,由后端转发请求到第三方API

在Express里新增一个接口,专门处理第三方API的调用转发:

app.get('/api/namedays', async (req, res) => {
  try {
    // 获取前端传来的日期参数
    const { day, month } = req.query;
    // 后端用Axios调用第三方API(后端请求不受浏览器CORS限制)
    const thirdPartyResponse = await axios.get('https://api.abalin.net/namedays', {
      params: { day, month }
    });
    // 把第三方API的结果返回给前端
    res.json(thirdPartyResponse.data);
  } catch (error) {
    // 处理错误,返回合适的状态码和信息
    res.status(error.response?.status || 500).json({ 
      error: error.message || 'Failed to fetch namedays' 
    });
  }
});

app.listen(4000, () => {
  console.log('Proxy server running on http://localhost:4000');
});

3. 前端修改请求地址,指向你的代理接口

把原来直接请求第三方API的代码,改成请求自己的Express服务器:

// 原来的错误写法(直接请求第三方,触发CORS)
// axios.get('https://api.abalin.net/namedays?day=25&month=11')

// 正确写法(请求自己的代理接口)
axios.get('http://localhost:4000/api/namedays', {
  params: { day: 25, month: 11 }
})
.then(response => {
  console.log('Namedays data:', response.data);
})
.catch(error => {
  console.error('Request failed:', error);
});

为什么之前的方法没用?

  • server.options("*", cors())只是处理了OPTIONS预检请求,但问题核心是前端直接请求第三方API时,第三方服务器没有返回允许的Origin响应头,浏览器依然会拦截这个响应。
  • 手动给前端请求加请求头也无效,因为Access-Control-Allow-Origin被请求服务器返回的响应头,前端自己添加的请求头无法改变第三方服务器的响应配置。

这样调整后,前端和你的Express服务器之间的请求受你配置的CORS允许,而后端调用第三方API不受浏览器限制,就能正常获取数据了。

内容的提问来源于stack exchange,提问作者user8839735

火山引擎 最新活动