Fetch API 无法加载本地主机：（端口和路径）。 URL 方案 "localhost" 不受支持

Question

我创建的 React 应用程序使用 API 通过 Spring Boot.

创建

我想通过我的 React 应用程序中的表单将文件发送到服务器（服务器运行良好，因为我可以在 Postman 中上传文件）。

这是我的表格：

   <form onSubmit={e => uploadFile(e)} >
           <input type="file" name="img" onChange={changeHandler} />
           <button>Add!</button>
   </form>

uploadFile 和 changeHandler 方法：

 const [selectedFile, setSelectedFile] = useState()

const uploadFile = () => {
        const formData = new FormData()
        formData.append('File', selectedFile)

        fetch(`localhost:8080/courses/1/comments/1/img`, {
            method: 'post',
            body: formData
        })
            .then(resp => resp.json())
            .then(data => console.log(data))
            .catch(err => console.log(err))
    }

    const changeHandler = (e) => {
        setSelectedFile(e.target.files[0])
    }

当我提交此表单时，我得到：

Fetch API cannot load localhost:8080/courses/18/comments/1/img. URL scheme "localhost" is not supported.

如何解决这个问题？

Answer 1

您必须按如下方式指定 URL。

http://localhost:8080/courses/1/comments/1/img

Answer 2

您可能忘记在 URL 中指定 http 协议。

所以，把fetch方法中的localhost:8080/courses/1/comments/1/img换成http://localhost:8080/courses/1/comments/1/img

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

Fetch API 无法加载本地主机：（端口和路径）。 URL 方案 "localhost" 不受支持

Fetch API cannot load localhost:(port&path). URL scheme "localhost" is not supported

fetch

reactjs