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

admin管理员组

文章数量:1344241

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 ?

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 ?

• javascript
• reactjs
• api
• axios

Share Improve this question Follow edited Jun 9, 2020 at 7:20 Yorbjörn asked Jun 9, 2020 at 7:12 YorbjörnYorbjörn 45611 gold badge66 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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.

本文标签：