求助：使用Fetch API调用接口时出现Access-Control-Allow-Origin相关跨域错误

阿华AIGC实验室

2026-4-29

解决fetch请求的跨域错误问题

嘿，我看你遇到的是典型的**跨域资源共享（CORS）**错误，这是浏览器的同源策略在起作用——当你从当前页面域名请求另一个完全不同域名的API时，浏览器会自动进行安全校验，如果目标服务器没有返回允许跨域的响应头，就会直接拦截请求，抛出你截图里的这类错误。

给你几个可行的解决思路：

1. 确认目标API的CORS配置

先试试用Postman或者curl直接调用这个API：

curl https://j0ke.xyz/free/api/garsvsfilles

如果能正常拿到返回值，那问题就出在这个API没有配置允许你当前域名访问的CORS响应头（比如Access-Control-Allow-Origin）。这种情况下，你得联系API的开发者添加对应的跨域配置；如果是你自己维护的API，直接在服务器端设置这些响应头即可。

2. 搭建代理服务器绕开跨域

要是你没法修改目标API的配置，最简单的办法就是自己搭个小代理服务器，让代理去请求目标API，你的前端代码再请求代理服务器（同域名下不会触发跨域限制）。比如用Node.js写个极简代理：

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 代理接口
app.get('/get-garsvsfilles', async (req, res) => {
  try {
    const apiRes = await fetch('https://j0ke.xyz/free/api/garsvsfilles');
    const data = await apiRes.json();
    res.send(data);
  } catch (err) {
    res.status(500).send({ error: '请求代理失败' });
  }
});

app.listen(3001, () => {
  console.log('代理服务器运行在3001端口');
});

然后把你的前端代码改成请求这个代理接口：

fetch('http://localhost:3001/get-garsvsfilles')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('出错了:', err));