React调用Fetch上传文件到Spring Boot报localhost URL scheme不支持怎么解决

当前报错的核心原因是你调用fetch时填写的请求URL缺少HTTP/HTTPS协议前缀，浏览器无法识别localhost开头的地址的访问协议，所以抛出了URL scheme不支持的错误。

第一步：修复请求URL #

把fetch调用里的地址加上http://前缀，修改如下：

fetch(`http://localhost:8080/courses/1/comments/1/img`, {
    method: 'post',
    body: formData
})

修改完这一步即可解决当前提示的URL scheme不支持的报错。

第二步：修复表单提交默认行为 #

你当前的表单提交逻辑没有阻止浏览器默认的表单提交刷新行为，会导致请求异常中断，需要修改uploadFile方法，在开头添加阻止默认事件的代码：

const uploadFile = (e) => {
    // 新增这一行
    e.preventDefault()
    const formData = new FormData()
    formData.append('File', selectedFile)
    // 剩下的原有逻辑保持不变
}

其他注意事项 #

• 检查参数名匹配：你当前在formData里添加的文件参数key是File，要和Spring Boot接口里@RequestParam声明的参数名保持一致，如果后端接收参数名是img（和你表单input的name属性一致），需要把append的第一个参数改成img，否则会出现参数缺失的报错。
• 配置跨域：如果你的React应用运行端口和Spring Boot端口不一致（默认React是3000，Spring Boot是8080），需要在Spring Boot端配置跨域支持，否则修改完URL后会出现跨域访问报错。

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