CODEWITHSUNDEEP
javascriptreactjsapiaxios
Yorbjörn
Yorbjörn

Reputation: 456

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

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 ?

Upvotes: 5

Views: 15544

Answers (2)

mohammad
mohammad

Reputation: 521

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.

Upvotes: 1

Red Baron
Red Baron

Reputation: 7682

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
},

Upvotes: 6

Related Questions