Insightful discussion about CORS No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
I designed a local asp.net MVC application using C# (httpclient) for POSTing data to an API on a server that allows CORS, and it functions correctly. However, the JavaScript application I am running locally presents the following issue:
Unable to access XMLHttpRequest at '' from origin 'http://localhost:3000' due to CORS policy blocking: No 'Access-Control-Allow-Origin' header found on the requested resource.
GET requests function properly in the JavaScript app. Here is an excerpt of the code:
axios({
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
baseURL: 'https://apiurl',
url: '/oauth/token',
data: {
grant_type: 'password',
username: this.state.username,
password: this.state.password
}
}).then(resp => {
console.log(resp);
});
The API is WEBAPI with CORS enabled.
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
I am aware that proxying could be a solution, but I am interested in finding out if there is anything else I might have overlooked.