JavaScript调用Web API遇Access-Control-Allow-Origin CORS错误如何解决？

阿华AIGC实验室

2026-5-7

解决CORS策略阻止API调用的问题

首先得说清楚你遇到的问题根源：服务器返回的Access-Control-Allow-Origin头值https://eodhistoricaldata.com/*是无效格式——CORS规则里，这个头要么是具体的域名（比如http://127.0.0.1:5500），要么是全局通配符*（但带认证的请求不能用*），带路径的通配符浏览器根本不认可，所以直接拦截了你的请求。

浏览器插件只能解决你自己本地的问题，其他人用不了很正常，下面给你几个通用的解决方案，按推荐程度排序：

1. 搭建后端代理服务（最推荐，生产/开发都能用）

核心思路是：前端不直接调用第三方API，而是调用你自己的后端接口，由后端去请求第三方API，再把结果返回给前端。因为浏览器的CORS限制只针对前端发起的跨域请求，后端之间的请求不受这个限制。

举个Node.js + Express的简单示例：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// 代理接口，接收前端的参数
app.get('/api/get-fundamentals', async (req, res) => {
  try {
    // 建议把token存在后端的环境变量里，别暴露给前端！
    const apiToken = process.env.EOD_API_TOKEN; 
    const stockSymbol = req.query.symbol; // 比如AAPL.US

    // 后端请求第三方API
    const response = await axios.get(`https://eodhistoricaldata.com/api/fundamentals/${stockSymbol}?api_token=${apiToken}`);
    
    // 返回结果给前端
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json({ error: err.message });
  }
});

app.listen(PORT, () => {
  console.log(`代理服务跑在 http://localhost:${PORT} 啦`);
});

然后前端就调用你自己的接口：

fetch('http://localhost:3000/api/get-fundamentals?symbol=AAPL.US')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

这个方法不仅解决了CORS问题，还能保护你的API token不被泄露（前端看不到token），其他人访问你的应用时也能正常获取数据。

2. 检查第三方API的CORS白名单配置

去eodhistoricaldata的官方文档看看，有没有提供添加自定义域名到CORS白名单的功能。很多API服务商允许开发者在后台配置允许跨域请求的域名，比如把http://127.0.0.1:5500（生产环境换成你的正式域名）添加进去，这样服务器就会返回正确的Access-Control-Allow-Origin头，前端就能直接调用了。

3. 开发环境临时调试方案（仅自己用）

如果只是自己开发调试，除了浏览器插件，还可以用Chrome的启动参数关闭CORS检查：

Windows：打开命令提示符，输入chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
Mac：打开终端，输入open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
注意：这个方法会关闭Chrome的安全防护，只能用来调试，别用它浏览其他网站，更不能用于生产环境。