Home:ALL Converter>Sending multipart/form-data with authorization header from react

Sending multipart/form-data with authorization header from react

Ask Time:2020-10-29T18:07:17         Author:mlang

Json Formatter

I am trying to send a POST request with form data from a React frontend to a Go backend.

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)
            );
    };

On the backend side, I am trying to access the data the following way:

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")
    ...
}

However, I am receiving the following error:

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

Also, the fileHeader is nil.

The only possible solution I found was to remove the header as mentioned in this post, but encoding the authorization token in the POST body is of course not my preferred way of fixing this issue.

As the question was asked already and I wasn't clear about this one: Setting the headers to

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

leads to the same problem.

PS: React fetch seems to automatically generate a header such as the following:

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

When setting another header manually, the fetch API does not apply this header. A potential solution might be to combine the headers, however I have no idea how this could work.

PPS: Trying the same with axios leads to the same issue.

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)
        );

Author:mlang,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/64588913/sending-multipart-form-data-with-authorization-header-from-react
yy