使用Fetch调用Express接口报Unexpected end of input错误如何解决

错误原因 #

• 你给Fetch设置了mode: 'no-cors'，该模式专门用于跨域请求不需要获取返回内容的场景（比如埋点上报），此时返回的响应是*不透明（opaque）*类型，前端无法读取响应头、响应体的任何内容，调用response.json()时因为没有可解析的内容就会抛出Unexpected end of input语法错误。
• 你加no-cors的本质原因是前端和后端服务端口/域名不一致触发了浏览器同源策略限制，直接请求会报跨域错误，你想通过这个配置绕过，但这个方式本身不支持读取返回数据。

解决方案 #

第一步：移除Fetch的no-cors配置 #

修改前端请求代码为：

fetch(API_URL)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))

修改后暂时会出现跨域错误，接下来处理跨域问题即可。

第二步：Express服务端配置CORS跨域 #

两种方案选其一即可：

方案1：使用cors中间件（推荐）

1. 安装依赖：

   npm install cors
   

2. 服务端代码中引入并启用，注意要放在所有路由注册之前：

   const cors = require('cors')
   server.use(cors())
   

   如果需要限制允许访问的域名避免接口被恶意调用，可传入配置：

   server.use(cors({
     origin: '你的前端服务地址，比如http://localhost:5173'
   }))
   

方案2：手动添加跨域响应头

在你的路由之前添加如下中间件即可：

server.use((req, res, next) => {
  // 允许的请求源，生产环境建议替换为具体前端域名
  res.header('Access-Control-Allow-Origin', '*')
  // 允许的请求头
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  // 允许的请求方法
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') return res.sendStatus(200)
  next()
})

配置完成后重启服务端，前端即可正常请求获取数据。

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