使用JavaScript Fetch API请求CKAN开放数据时返回[object Error]的问题排查

嘿，这个问题我熟！你遇到的大概率是CORS跨域限制的问题，我给你拆解下：

为什么直接浏览器打开URL没问题，但Fetch请求报错？ #

直接在浏览器地址栏输入URL发起的请求，属于浏览器的"普通导航请求"，不受同源策略的CORS检查限制；但你用fetch()发起的是脚本驱动的AJAX请求，浏览器会严格执行同源策略——如果目标服务器没有返回允许你当前域名跨域访问的响应头，浏览器就会拦截这个请求，抛出你看到的[object Error]。

你可以打开浏览器开发者工具（按F12），切换到Network面板，重新运行你的代码，就能看到这个请求的状态是CORS error，或者在Console里能看到更具体的提示，比如No 'Access-Control-Allow-Origin' header is present on the requested resource。

怎么解决？ #

这里给你几个实用的方案：

• 本地测试用跨域插件：如果你只是本地开发调试，可以装个浏览器跨域插件（比如Chrome的「Allow CORS: Access-Control-Allow-Origin」），开启后就能绕过CORS限制，让你的Fetch请求正常工作。但注意这只适合开发，不能用于生产环境。

• 搭建后端代理：这是生产环境的标准解决方案。你可以在自己的服务器上写一个简单的代理接口，让前端请求自己的服务器，再由服务器去请求CKAN的API（服务器端请求不受浏览器同源策略限制）。比如用Node.js+Express写个代理：

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

// 代理接口
app.get('/ckan-packages', async (req, res) => {
  try {
    const ckanResponse = await fetch('https://ckan.open.nrw.de/api/3/action/package_list');
    const data = await ckanResponse.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: '请求CKAN API失败' });
  }
});

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

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

fetch('http://localhost:3000/ckan-packages')
  .then(response => {
    if (response.status !== 200) {
      console.log('请求出错，状态码：', response.status);
      return;
    }
    response.json().then(data => console.log(data));
  })
  .catch(err => console.log('Fetch错误:', err));

• 检查CKAN API是否支持JSONP：不过这个方法比较老，现在很多API已经不支持了，但可以试试——在请求URL后面加?callback=handleData，然后在页面里定义全局的handleData函数来接收数据：

<script>
function handleData(data) {
  console.log(data);
}
</script>
<script src="https://ckan.open.nrw.de/api/3/action/package_list?callback=handleData"></script>

但这种方法只能用于GET请求，而且安全性不如CORS，优先推荐前面的代理方案。

内容的提问来源于stack exchange，提问作者feinheitsbrei