React.js调用本地API时fetch报错ERR_SSL_PROTOCOL_ERROR如何解决

• 核心错误：前端请求地址错误使用https协议，本地开发的Node后端服务默认未配置SSL证书，仅支持http协议访问，直接触发ERR_SSL_PROTOCOL_ERROR报错
• 潜在错误1：后端未配置跨域规则，前端React默认运行在3000端口，与后端3001端口不同源，协议修正后仍会出现跨域报错
• 潜在错误2：fetch请求未添加异常捕获逻辑，请求失败时会直接抛出Uncaught (in promise) TypeError

1. 修正前端请求协议与错误捕获 #

将fetch请求的https改为http，同时添加try/catch捕获异常：

useEffect(() => {
  async function getData(){
    try {
      const res = await fetch('http://localhost:3001/api/music')
      const track = await res.json();
      console.log(track)
      setState(track)
    } catch (err) {
      console.error('请求异常：', err)
    }
  }
  getData();
},[])

2. 后端配置跨域规则 #

首先安装cors依赖：
npm install cors

在后端入口文件（通常为app.js/server.js）中全局启用cors，注意要放在路由注册之前：

const express = require('express')
const cors = require('cors')
const app = express()

// 启用跨域
app.use(cors())

// 后续注册路由
app.use('/api/music', require('./路由文件路径'))

3. 可选优化：后端控制器添加错误处理 #

避免Mongo查询异常时无返回的问题：

function index(req, res){
    Music.find({}, function(err, music){
        if (err) {
          return res.status(500).json({error: '数据查询失败'})
        }
        res.status(200).json(music)
    })
}

4. 验证步骤 #

修改完成后先直接在浏览器地址栏输入http://localhost:3001/api/music，确认接口可以正常返回数据，再启动前端项目测试即可。

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