时间戳

首页 > 解决方案 > 从反应发送带有授权标头的多部分/表单数据

reactjs - 从反应发送带有授权标头的多部分/表单数据

问题描述

我正在尝试将带有表单数据的 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

手动设置另一个标头时，提取 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)
        );

标签： reactjsgoauthorizationmultipartform-data

解决方案

我认为添加mode: "no-cors"到您的requestOptions意愿会有所帮助。这个库有一些奇怪的地方我想不通，即使显式发送Authorization标头我也无法在后端看到它，因此您可能需要额外的配置来确保发送标头。

我测试了后端，它确实可以按预期工作（使用邮递员发送测试Content-Type：multipart/form-data和附件

推荐阅读