axios is not working with post file data wirh new FormData()

Question

My previous code for file uploading is working with jQuery Ajax call. But when I am trying to achieve the same task with Axios library then I got errors. I also search solution for that but not found. If anyone faces this issue. guide us. My previous code in Ajax call:

$.ajax({
    url: this.props.url,
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function (response) {
        console.log(response);
    },
    error: function (err) {
        console.log(err);
    }
}); 

But in my new project (ReactJs and Axios), I 'm trying to achieve the same task with Axios(v0,17.0). But I am getting the error:

Access to XMLHttpRequest at ' https://example.com/ ' from origin ' http://localhost:9002 ' has been blocked by CORS policy: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:87)

below code in Axios, I am using formData() to append file to eaily.

import axios from 'axios';

let formData = new FormData();
formData.append('noteFilename', files);

axios({
    method : 'POST',
    url : this.props.url,
    data:formData,
    headers: {
        'cache': false,
        'Content-Type' : false,
        'processData': false,
        'Access-Control-Allow-Origin': '*',
        'crossDomain' : true,
    },
    withCredentials: true,
}).then((response) => {
    console.log("response", response)

}).catch(function (error) {
    console.log(error);
});

Answer 1

The error occurs because the browser sends a request to check if the api is allowed to be accessed from the browser on a different domain. Add headers to the server for the client-side to understand that it can make calls and will get a valid response for subsequent GET/POST calls.

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

you can even restrict the domain via the Access-Control-Allow-Origin key

response.setHeader("Access-Control-Allow-Origin", "xyz.com");

PS: Changes are to made on the server-side and not the client-side.

Answer 2

Access to XMLHttpRequest at ' https://example.com/ ' from origin ' http://localhost:9002 ' has been blocked by CORS policy: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

This is because you are trying to set the Access-Control-Allow-Origin header on the request.

It makes no sense to do that. Access-Control-Allow-Origin is a response header which the server sets to give the client permission to pass the data to JS.

Remove that header.