‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response

user_11868566 0
Viewed 3724

I'm trying to make a simple post call that will send data to mailgrid so an automatic mail will be send to the chosen person. But as i'm relative new to making API calls in general there are some thing I don't understand.

These are the errors I get when i try to make the call:

header ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response

And

CORS request did not succeed

He is my function that executes the call:

const sendMail = () => {
        axios.post(`https://{{private_url}}/public/mail/{user_id}/{mail_id}`, {
            headers: {
                "Access-Control-Allow-Headers": "Content-Type",
            },
            data: {
                first_name: data.first_name,
                last_name: data.last_name,
                message: data.message,
                email: data.email,
            }
        })
            .then(response => {
                console.log(response);
                console.log(response.headers)
                close();
            })
            .catch(error => {
                console.log(error);
                console.log(error.headers)
            });;
    }

What am I overseeing or where am I making a mistake ?

axios reactjs api javascript
2 Answers

you are using the headers object incorrectly. content-type is separate. please use like so:

headers: {
    "Access-Control-Allow-Headers": "*", // this will allow all CORS requests
    "Access-Control-Allow-Methods": 'OPTIONS,POST,GET', // this states the allowed methods
    "Content-Type": "application/json" // this shows the expected content type
},
user_107953480

as in developer.mozilla says:

The HTTP request which makes use of CORS failed because the HTTP connection failed at either the network or protocol level. The error is not directly related to CORS, but is a fundamental network error of some kind.

In many cases, it is caused by a browser plugin (e.g. an ad blocker or privacy protector) blocking the request or VPN plugin changing origin of the request.

if there is one, you can disabled it.

The server can also block uknown origins causing Access-Control-Allow-Origin error.

user_59486420
Related