如何用JavaScript调用API？调用开源API遇Fetch失败求助

核心原因：目标API服务已下线 #

你调用的https://offensive-profanity.herokuapp.com/部署在Heroku免费平台上，而Heroku在2022年底终止了免费托管服务，这个API已经无法正常访问，这是导致Failed to fetch的主要原因。

正确解决步骤 #

1. 本地部署该API #

如果你想使用这个仓库的功能，最简单的方式是在本地运行服务：

• 克隆仓库到本地：

  git clone https://github.com/leozz37/profanity.git
  

• 进入项目目录安装依赖：

  cd profanity
  npm install
  

• 启动本地服务：

  npm start
  

  服务会运行在http://localhost:3000

2. 正确调用API接口 #

原代码的请求路径不符合API要求，这个仓库的核心检测接口是/check，需要传入text参数指定要检测的内容。修改后的代码：

fetch('http://localhost:3000/check?text=your-text-here')
  .then(res => {
    // 先校验响应状态
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('错误详情:', err));

添加catch块可以更直观地查看错误细节，避免仅显示模糊的Failed to fetch提示。

3. 解决跨域问题 #

如果你的前端代码是直接打开本地HTML文件运行（协议为file://），调用本地API可能触发跨域限制。可以：

• 用本地服务器运行前端代码（比如使用live-server工具），或者
• 确保前端与API的域名、端口一致，即可规避跨域问题。

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