I've developed an AWS function with .net core, it's been deployed to AWS and I can call it from Postman and seems everything's ok, but when I try to call it from a react application with Axios library I get this error:
(index):1 Access to XMLHttpRequest at 'https://awsfunctionurl/api/Organisations' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
here is the code to call the API:
const response: Response = await axios.get(url,{
headers:{
"content-type": "application/json; charset=utf-8",
"Authorization": `Bearer ${accesToken}`
},
})
When I remove Authorization header it starts working!
If you are running the request from a local browser, it will block the pre-flight request by default. There are workarounds for this, depending on the browser. See here, for example, for Chrome.
Alternatively, it may be easier to just add '"Access-Control-Allow-Origin": "*"' in your response headers from the lambda function itself.
Related
I am sending CORS request as follows:
const axiosConfig = {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
//'crossdomain' : true
// 'Access-Control-Allow-Origin': '*'
}
};
let netAddress=https://some port/
axios.post(netAddress, obj, axiosConfig)
where obj is the data object.
Also, i am running npm start as below for React app
set HTTPS=TRUE&&npm start
The headers accepted by the server are as follows:
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-methods:GET , POST , PUT, PATCH ,DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:x-paging-pageno,x-paging-pagesize,x-paging-totalpage,
x-pagingtotalrecordcount
I am getting error as follows:
Access to XMLHttpRequest at 'https://10.6.0.7:9022/api/event/Event' from origin 'https://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.
My localhost as well as server are running on HTTPS. I have tried crossdomain and Access-Control-Allow-Origin, but its not working still
Also, GET requests to the same server is successfull, but POST fails
And, I tried with chrome extensions like CORS unblock, but its failing
Please help
This may not be the answer you are looking for but I had this issue recently trying to POST to an endpoint from my client and was not able to due to CORS. It was a browser issue, not an issue with what the server accepted. You can get this to work by writing a cloud function which does the POST to your endpoint and then call that cloud function from your client. Be aware that you cant make http requests in cloud functions without at least the Blaze plan. Again, sorry if this doesnt help but thought I would share.
Getting below error while i call DotNet core API method from ReactJS post call using Fetch options.
ReactJS post call only i am getting this error, below way i was tried.
Jquery get/post request - working fine
Postman get/post request - working fine
Swagger get/post request - working fine
ReactJS get request - working fine
ReactJS post request - Not working fine
"Access to fetch at 'https://localhost:44352/api/Address/CheckAvailability' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
/*ReactJS Code: */
export function saveAddress(address) {
return fetch(baseURL + "Address/CheckAvailability", {
method: "POST",
headers: {
"Access-Control-Allow-Origin": "*",
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(address),
}).then(handleResponse)
.catch(handleError);
}
/*Dot.Net core Code: */
[HttpPost]
public ActionResult CheckAvailability([FromBody]ReqAddressDetailsDto request)
{
if ((request) == null)
{
return NotFound();
}
return Ok(request);
}
If your client application (the React web app) is on another scheme (any of http/https, domain or port is different), you need to have CORS enabled on your ASP.NET Core back-end.
In the Startup.cs file, you need to add this:
In ConfigureServices()
services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder.WithOrigins("http://localhost:3000/")
.AllowAnyMethod()
.AllowAnyHeader();
});
});
In Configure() put this just before app.UseMvc():
app.UseCors();
Check this link for more info:
https://learn.microsoft.com/en-us/aspnet/core/security/cors
did you enabled / configured cors in this .net core api?
How to enable CORS in ASP.NET Core
You can check CORS headers on your backend script.
The CORS standard manages cross-origin requests by adding new HTTP headers to the standard list of headers. The following are the new HTTP headers added by the CORS standard:
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
These headers are all important, but let’s we focus on the following header:
Access-Control-Allow-Origin
You should define Access-Control-Allow-Origin header as '*'. I guess, it may be solved your problem simply. A little example for PHP:
<?php
header("Access-Control-Allow-Origin: *");
You may find an info of each CORS header the following: CORS Headers.
If you want to learn more details about CORS, You can follow this link.
This status code is a useful hint to understand that the server doesn’t support OPTIONS requests.
Add the corresponding header on the server side when handling the OPTIONS method. We will then have the following requests:
Access-Control-Allow-Headers : Content-type
Hopefully this solves .
I would like to understand why the AngularJS $http service doesn't work and the fetch API works.
Below is the AngularJS code:
const $http = angular.element(document.body).injector().get('$http')
$http({
method: 'GET',
url: 'http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/',
headers: {
'Authorization': 'Basic YWRtaW46YWRtaW4='
}
})
This gives me this error:
angular.js:12845 OPTIONS http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/ 403 ()
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 403.
The weird part is that this:
fetch('http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/', {
method: 'GET',
headers: {
'Authorization': 'Basic YWRtaW46YWRtaW4='
}
}).then((r) => r.json()).then(console.log)
Gives me the correct response
I know this could be a CORS error, but i've added the CORS filter on my tomcat so everything should work (and fetch works).
Is this a bug in fetch or $http?
While i was writing this question i found the answer:
On my AngularJS app, there was a config file that was setting this:
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
And this (along with other headers), makes the request a preflighted one, as peer the CORS documentation:
[...] Apart from the headers set automatically by the user agent (for
example, Connection, User-Agent, or any of the other header with a
name defined in the Fetch spec as a “forbidden header name”), the
request includes any headers other than those which the Fetch spec
defines as being a “CORS-safelisted request-header”, which are the
following:
Accept Accept-Language
Content-Language
Content-Type (but note the additional requirements below)
Last-Event-ID
DPR
Save-Data
Viewport-Width
Width
So the fetch API worked because it wasn't setting that (If-Modified-Since) header, and the $http service was.
I'm trying to request the access token with Axios in my SpringBoot + React application.
axios.post("http://localhost:8080/oauth/access_token", 'grant_type=password&username='+username+'&password='+password,
{ headers: {
'Authorization': 'Basic ' + btoa("clientid:clientsecret"),
'Content-Type': 'application/x-www-form-urlencoded,charset=UTF-8'
}
But I'm always getting the following error: "Response for preflight has invalid HTTP status code 401".
I tried the request with Postman and it works always.
Thanks!
The problem is that the Resource Owner Password Credentials grant, you are trying to use, is not suitable for JavaScript applications running in a browser, because you cannot keep the password safe in a browser. That's also the reason why the token endpoint (/access_token in your case) doesn't support CORS HTTP headers and the XHR request from your question fails.
Unlike browser, Postman doesn't require the CORS headers and doesn't issue the OPTIONS request before the actual request, so it works.
Try to use the Implicit grant flow which is designed for browser applications.
I am trying to debug my angular app with chrome dev console.I want to send a get request to a local server from angular. I've tried the following:
$http = angular.element($0).injector().get('$http');
$base64 = angular.element($0).injector().get('$base64');
var auth = $base64.encode("user:passwd");
var authHeaders = {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"};
$http.get("url",{headers:authHeaders,method:"GET"})
After reading this answer:
https://stackoverflow.com/a/30296149/1496826
I thought that custom header is the problem. So, I tried putting the authorization headers in the body:
$http.get("url",{data: {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"},method:"GET"})
But I am still getting the same error:
XMLHttpRequest cannot load "url". No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'null' is
therefore not allowed access. The response had HTTP status code 401.
This same get request works fine from Postman:
var settings = {
"async": true,
"crossDomain": true,
"url": "url",
"method": "GET",
"headers": {
"authorization": "Basic bWdhcasdasd",
"cache-control": "no-cache",
"postman-token": "XXXXXX-XXXXXX-xXXXX-xXXXX"
}
}
I have tried several other variation like - $http default / common header etc. but everything failed. Please help.
this is a CORS issue.
CORS headers must be handled server side, i don't see your server side code here but in order to let this error disappear you must specify which domain are allowed to request resources.
the exception is caused by the browser that intercept the server response check the headers and if it doesn't find the Allow-Control-Allow-Origin header it won't forward the response to your code (this happens only for cross origin request).
This is why Postman let you see the response, because it doesn't do what chrome does, doesn't make any check.
As i said the correct solution is to fix your server side code and specify the Allow-Control-Allow-Origin header , alternatively a quick but temporary workaround is to install this plugin for chrome that will intercept the server response and add the Allow-Control-Allow-Origin to * (means any domain) this trick will fool chrome and make you see the response.