如何解决JavaScript Fetch API出现415错误？Postman正常HTML调用失败

核心问题：mode: 'no-cors'导致无法读取响应 #

你代码里加了mode: 'no-cors'，这会让浏览器发起不透明请求——哪怕API实际返回了数据，浏览器也会完全限制你读取响应内容，包括调用response.json()，这就是你在HTML里报错的直接原因。Postman不受浏览器CORS规则限制，所以能正常拿到响应。

修复步骤 #

1. 立刻移除mode: 'no-cors'
   删掉options里的这一行，这是解决问题的第一步。修正后的options代码如下：

   const options = {
       method: 'POST',
       headers: {accept: 'application/json', 'content-type': 'application/json'},
       // 移除mode: 'no-cors'
       body: JSON.stringify({
         profiles: [
           {email: 'xxx@klaviyo.com'},
           {phone_number: '+1234567896'}
         ]
       })
     };
   

2. 处理CORS问题
   移除no-cors后，如果浏览器报CORS相关错误，说明Klaviyo的API不允许你的前端域名直接访问。这时有两种解决办法：

   • 检查Klaviyo API文档，确认是否支持前端直接调用，以及是否需要配置允许的域名（部分API支持在后台添加CORS白名单）。
   • 搭建一个后端代理：前端请求自己的后端接口，由后端携带API key去调用Klaviyo API，再把结果返回给前端。这样既解决了CORS问题，还能避免API key暴露在前端代码里（直接把API key写在前端是严重的安全隐患）。

3. 优化响应处理逻辑
   移除no-cors后，正常情况下你就能读取响应了，建议加一层响应状态检查，避免非200状态码导致的json解析失败：

   fetch("https://a.klaviyo.com/api/list/yyyyyyyyyyy/members?api_key=xxxxxxxxxxxxxxxxx", options)
     .then(response => {
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
       }
       return response.json();
     })
     .then(response => console.log(response))
     .catch(err => console.error('请求失败:', err));
   

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