使用来自react的授权标头发送multipart/form-data

Question

我正在尝试将带有表单数据的POST请求从React前端发送到Go后端。

const upload = () => {
        let data = new FormData();
        data.append('file', file);
        data.append('namespace', namespace);
        const requestOptions = {
            headers: { 'Authorization': 'basic ' + props.getToken() },
            method: 'POST',
            body: data
        };
        fetch(`${process.env.REACT_APP_BACKEND_URL}/upload`, requestOptions)
            .then(
                response => alert(response.status)
            ).catch(
                error => console.log(error)
            );
    };

在后端，我尝试通过以下方式访问数据：

func uploadHandler(w http.ResponseWriter, r *http.Request) {
    // Read content
    r.ParseMultipartForm(10 << 20)
    file, fileHeader, err := r.FormFile("file")
    if err != nil {
        fmt.Println(err)
    }
    fmt.Println(fileHeader)
    var buf bytes.Buffer
    io.Copy(&buf, file)
    yamlData := buf.Bytes()
    namespace := r.FormValue("namespace")
    ...
}

但是，我收到以下错误：

request Content-Type isn't multipart/form-data

此外，fileHeader是nil。

我发现的唯一可能的解决方案是删除这篇文章中提到的标头，但在POST正文中编码授权令牌当然不是我解决此问题的首选方法。

由于已经有人问过这个问题，我不清楚这个问题：将标题设置为

headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'basic ' + props.getToken() }

导致同样的问题。

PS：React fetch似乎会自动生成如下标题：

multipart/form-data; boundary=----WebKitFormBoundarykm4IEyyauWp42XvA

手动设置另一个标头时，fetch API不会应用此标头。一个潜在的解决方案可能是组合标头，但我不知道这是如何工作的。

PPS：使用axios尝试相同的操作会导致相同的问题。

axios({
    method: 'POST',
    url: `${process.env.REACT_APP_BACKEND_URL}/upload`,
    data: data,
    headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'basic ' + props.getToken() }
    })
        .then(
            response => alert(response.status)
        ).catch(
            error => console.log(error)
        );

Answer 1

我认为将mode："no-cors"添加到您的Request estOptions会有所帮助。这个库有一些奇怪的地方，我不明白，即使显式发送Authorize标头，我也无法在后端看到它，所以您可能需要额外的配置来确保标头已发送。

我测试了后端，这绝对按预期工作（使用Postman发送内容类型进行测试：多部分/表单数据和附加文件