We Keep Coding

Post Request CORS Error (Access-Control-Allow-Origin) on fetch api even i added access control on my header [duplicate]

This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 1 year ago.
I am trying to post some data on a backend server. but when i submit the data i got an error following below:
Fetch at 'X' from origin 'localhost:8080' has been blocked by cors. No Access-Control-Allow origin in the header.
Though I have access-control-allow origin on header. The code is given below:
fetch(url, {
mode: "cors",
method: "POST",
headers: {
"Access-Control-Allow-Origin": "http://localhost:8080",
"Access-Control-Allow-Credentials": "true",
"Content-Type": "application/json",
"API-Key": "xxxxxxxxxxxxxx",
Accept: "application/json",
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
})
.catch((error) => {
console.error("Error:", error);
});
I have tried no-cors policy but that server doesn't accept no-cors request.

CORS is filtered and handled server-side. Try adding allowed hosts in the server config, if you have access.
What is your back-end framework?
Or you can bypass CORS in chrome using --disable-web-security. Check here.

Axios.create and CORS

I am using axios for making a post request with data to an endpoint:
This works:
import axios from 'axios';
axios.post('https://example.com/v1/login', {
name: 'myuser',
password: 'mypassword',
});
But this doesn't
import axios from 'axios';
export const apiBase = axios.create({
baseURL: "https://example.com/v1/",
withCredentials: true,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
});
apiBase.post('login', {
name: 'myuser',
password: 'mypassword',
});
Which logs:
Access to XMLHttpRequest at 'https://example.com/v1/login'
from origin 'http://example.com' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: The
value of the 'Access-Control-Allow-Origin' header in the response must
not be the wildcard '*' when the request's credentials mode is
'include'. The credentials mode of requests initiated by the
XMLHttpRequest is controlled by the withCredentials attribute.
And actually, no header 'Content-Type' is added to this request.
Does anyone know what is wrong here?
EDIT: modified following comments
import axios from 'axios';
export const apiBase = axios.create({
baseURL: "https://example.com/v1/",
withCredentials: true,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
});
apiBase.defaults.headers['Content-Type'] = 'pplication/json;charset=UTF-8';
apiBase.defaults.headers['Access-Control-Allow-Origin'] = 'http://example.com';
apiBase.defaults.headers['Host'] = 'example.com';
apiBase.defaults.headers['Referer'] = 'example.com';
apiBase.defaults.headers['Accept-Encoding'] = 'gzip, deflate, br';
apiBase.post('login', {
name: 'myuser',
password: 'mypassword',
});
Which still returns
Access to XMLHttpRequest at 'https://example.com/v1/login'
from origin 'http://example.com' has been blocked by CORS policy: Response
to preflight request doesn't pass access control check: The value of the
'Access-Control-Allow-Origin' header in the response must not be the
wildcard '*' when the request's credentials mode is 'include'. The
credentials mode of requests initiated by the XMLHttpRequest is controlled
by the withCredentials attribute.

Setting credentials or setting the content-type to JSON will trigger a preflight request.
The requirements for a response to a preflight are stricter than for a non-preflighted request.
One of them is, as the error message says, that you can't use the wildcard. You have to specify the origin explicitly. You aren't doing that.
And actually, no header 'Content-Type' is added to this request.
Naturally. The preflight didn't get permission to set it, so the request is never made.

Axios, for whatever reason, doesn’t allow you to send data in a POST request in the form of a JSON object when withCredentials is set to true. You’ll need to stringify your data before passing it along.

Check your code :
-----> apiBase.defaults.headers['Content-Type'] = 'pplication/json;charset=UTF-8';
apiBase.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';

CORS error using fetch API - React create app

I'm consuming an API using fetch but i'm getting CORS error.
I tried multiples headers, but I'm not understading what's the problem.
I'm not the owner of the API, so I couldn't change it, but checking the response it's returning access-control-allow-origin.
Following is my request method:
export const execPOST = (url, body) => {
return fetch(url, {
method: "POST",
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
body: JSON.stringify(body)
});
};
The response is:
Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *
Isn't this response above enough to allow my request?
console error:
OPTIONS http://api net::ERR_ABORTED 405 (Method Not Allowed)
Access to fetch at 'http://api' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I got this working (meanwhile I develop) using "https://cors-anywhere.herokuapp.com/", but I don't think that I should use this for production enviroment.
I found a lot of material about this problem, but nothing that worked besides implements a backend to make the request or use something else as a proxy to make the request and so on...

Update code as given below (use 'mode' with the value 'no-cors' ):
For more details follow the link => https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
export const execPOST = (url: string, body: any) => {
return fetch(url, {
mode: 'no-cors',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
};

CORS headers are set by the API to protect users from malicious code making requests to sites on their behalf.
This means that you cannot enable or disable it from the client side as the Access-Control-Allow-Origin header is a server side only header.
If you don't have access to the API to change the headers then you won't be able to use the API from the client side.
In production you would have to create your own API that will handle the requests to the API you are trying to contact.

Angular 7 : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested

I have to implement an angular application with CURD operations. API is already hosted IN AWS, Which is working fine with Postman.
But my angular application getting
Access to XMLHttpRequest at 'https://acp56df5alc.execute-api.us-east-1.amazonaws.com/ams/getmember' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
My code is like below,
http_GET(actionUrl: string): Observable<any> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
'key': 'x-api-key',
'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',
})
};
return this.http.get<any>(this.baseUrl + actionUrl, httpOptions).pipe(
(response => {
return response;
}));
}
I have tried hard to solve this.But need some help

I had the same cors issue and tried all the suggested ways of setting Access-Control-Allow-Origin * without success.
Later I found two issues:
The data format I sent via POST request was not properly formatted.
The server could not handle empty parameters received from the post request.
Original request:
return this.http.post(API_URL + 'customer/login',
{email: email, password: password},{ headers: headers}
)
Worked after i wrapped the post data using JSON.stringify()
return this.http.post(API_URL + 'customer/login',
JSON.stringify({email: email, password: password}),{ headers: headers}
)

All/Most of these headers need to be defined on the server-side (whatever hosts the API on AWS)... not client side.
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
'key': 'x-api-key',
'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',
...
The most likely reason that postman works is that it directly sends a GET request. what you are sending is a complex request which is called 'pre-flight' and which causes an 'OPTIONS' request to be sent before the actual GET. this is not allowed by the remote side.

That's a common CORS problem that (if you're using asp .net core on backend) can be solved enabling CORS following this thread

PUT request body as application/json instead of plain/text

I'm messing around with react and trying to make a put request to an api. I'm trying to send my body as content-type application/json but it keeps sending as text/plain. If I add the header "Content-Type" : "application/json" I just get this as the return.
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
I'm using this api : http://funtranslations.com/api/yoda
Here is my request:
fetch('http://api.funtranslations.com/translate/yoda.json', {
method: 'PUT',
body: JSON.stringify({
text: this.state.input
})
})
.then(res => {
return console.log(res.json());
})
}
Thank you in advance for attempting to help me :)

I think you are sending data in wrong content-type. According to funtranslation web site content-type should be application/x-www-form-url-encoded
fetch('http://api.funtranslations.com/translate/yoda.json', {
method: 'PUT',
headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
body:"text=hadi"
})
.then(res => {
return console.log(res.json());
})
This address is clearly explaining CORS issue
For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.
I love this picture to see what is CORS: