调用无CORS的外部JSON API遇解析错误，求解决方案

我明白你现在的困扰——明明网络面板里能看到合法的JSON响应，但代码里就是拿不到，还报JSON解析错误。咱们一步步拆解问题和解决思路：

为什么mode:"no-cors"会导致这个问题？ #

当你设置mode:"no-cors"时，浏览器会发送一个不透明请求（opaque request），对应的响应就是你看到的type: "opaque"。这种情况下，浏览器出于安全考虑，会完全屏蔽JS代码对响应内容的访问权限——哪怕网络面板能抓到响应，你的JS也读不到任何数据，所以response.json()自然会抛出“意外结束的数据”错误，因为根本没有数据可以解析。

为什么JSONP无效？ #

JSONP的工作原理需要API服务器配合：它要求服务器返回的是一个包裹在回调函数里的JS代码（比如callbackName({...JSON数据...})），而不是纯JSON。如果这个外部API本身不支持JSONP格式，那你前端写再多JSONP的代码也没用。

可行的解决思路 #

1. 搭建后端代理（推荐用于生产环境） #

这是最通用的解决方案：自己写一个简单的后端接口，让前端请求你的后端，再由后端去调用那个外部API（后端不受浏览器CORS限制）。举个Node.js + Express的示例：

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

// 代理接口
app.get('/api/proxy-external', async (req, res) => {
  try {
    // 调用外部API
    const externalResponse = await fetch('你的外部API URL');
    const data = await externalResponse.json();
    // 将数据返回给前端
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: '代理请求失败：' + error.message });
  }
});

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

然后前端把请求地址改成你的代理接口：

fetch('http://localhost:3001/api/proxy-external')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

2. 浏览器插件临时调试（仅开发阶段用） #

如果只是自己开发调试，可以安装浏览器的CORS绕过插件（比如「CORS Unblock」），临时关闭浏览器的CORS检查。但注意：这个方法只能给自己用，不能作为生产环境的解决方案，普通用户不会装这个插件。

3. 联系API提供者开启CORS #

如果可能的话，联系外部API的维护方，请求他们在响应头中添加Access-Control-Allow-Origin（比如设为你的域名或者*）。这是最根本的解决办法，但需要对方配合。

总结 #

mode:"no-cors"不是解决CORS问题的正确方式，它本质上是“放弃读取响应数据”的妥协方案。你需要通过后端代理、API方支持或者临时调试工具来真正解决这个问题。

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