API在Postman中可用但fetch调用失败，如何实现同Postman的效果？

问题背景 #

使用fetch()调用第三方API时触发CSP错误：

Refused to connect to 'https://xxxxx/api' because it violates the following Content Security Policy directive: "connect-src 'self' updates.developer.mozilla.org www.google-analytics.com stats.g.doubleclick.net"

无法修改目标API的CSP配置，Postman或浏览器地址栏发起相同GET请求可正常获取XML响应，但fetch()直接请求报错；设置mode: 'no-cors'虽能得到响应，但无法读取响应体，需获取响应内容。

Postman与浏览器fetch的差异 #

• Postman不受CSP约束：Postman是独立的API调试客户端，不属于浏览器网页环境，完全绕过了网页的Content Security Policy规则。CSP是浏览器为保护网页安全设置的脚本请求限制，仅作用于页面内的JavaScript发起的请求。
• 浏览器地址栏请求是顶级导航：地址栏发起的请求属于用户主动触发的页面跳转（顶级导航），CSP的connect-src指令只管控脚本发起的异步请求（如fetch、XHR），不会限制这类导航请求。

用fetch实现需求的可行方案 #

因为无法修改目标API的CSP，只能通过以下两种方式绕开限制：

1. 借助浏览器扩展代理请求 #

浏览器扩展拥有独立于网页的权限，不受页面CSP约束。可以开发一个简单扩展，在后台脚本中发起请求，再将结果传递给页面：

// 扩展后台脚本 background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchTargetAPI') {
    fetch(request.apiUrl)
      .then(res => res.text()) // XML格式用text()解析
      .then(xmlData => sendResponse({ data: xmlData }))
      .catch(err => sendResponse({ error: err.message }));
    return true; // 保持消息通道开放直到异步请求完成
  }
});

// 网页中的调用脚本
chrome.runtime.sendMessage(
  { action: 'fetchTargetAPI', apiUrl: 'https://xxxxx/api' },
  (response) => {
    if (response.data) {
      // 处理XML响应内容
      console.log(response.data);
    }
  }
);

2. 搭建自有后端代理 #

在自己的服务器上搭建中转接口，前端请求自己的代理接口，由代理去调用目标API并返回结果。这样网页的CSP只需允许请求自身域名（'self'已包含）：

// Node.js + Express 代理示例
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy-target-api', async (req, res) => {
  try {
    const targetResponse = await axios.get('https://xxxxx/api');
    res.set('Content-Type', 'application/xml');
    res.send(targetResponse.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

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

前端修改请求地址为代理接口：

fetch('/proxy-target-api')
  .then(res => res.text())
  .then(xmlData => {
    // 处理XML内容
  });

⚠️ 注意：no-cors模式无法满足需求——该模式下浏览器会刻意屏蔽响应体的读取权限，仅允许访问少数安全头部，完全无法获取XML内容。

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