Why does a request to this URL work in the browser and a REST client (Insomnia) but not when called from my application running locally? - reactjs

This question already has an answer here:
How does Access-Control-Allow-Origin header work?
13 answers
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
7 answers
I'm using node v11.12.0 and react v16.8.4.
I'm working on a personal app that uses Nasa data. I'm trying to make use of the data stored at this endpoint: https://kauai.ccmc.gsfc.nasa.gov/DONKI/WS/get/CMEAnalysis
this endpoint successfully returns the data I need if I insert it into my browser, or make a call to it with my REST client (Insomnia) but the call is unsuccessful when I test it inside my app and I run my app locally.
I have tried console logging the data to see if the call to the endpoint is successful, but I get this CORS error message:
Access to fetch at 'https://kauai.ccmc.gsfc.nasa.gov/DONKI/WS/get/CMEAnalysis' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
I've tried to set cors headers on the request as such:
fetch(https://kauai.ccmc.gsfc.nasa.gov/DONKI/WS/get/CMEAnalysis, {mode: 'cors'})
and
fetch(https://kauai.ccmc.gsfc.nasa.gov/DONKI/WS/get/CMEAnalysis, {mode: 'no-cors'})
the no-cors version returns an unpopulated response (not what I want)
Is this not working due to headers set on the NASA API side? Or would this call to the endpoint work if I set a proxy on my application or hosted it online somewhere like Heroku? I guess I'm curious if I should rule out using this endpoint due to the rules that NASA has set on their side, or if there's a workaround I could use (like not calling the endpoint from localhost but from a hosted Heroku site)
Any suggestions?

Related

Angular AWS blocked by CORS policy

Hi I created an AWS API Gateway that access a Lambda Function.
If I try to call the Gateway from Postman everything works fine. But when I try to call the get API with my Angular Application I get the following error:
Access to XMLHttpRequest at 'apiUrl' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I create my Angular Request with the following code:
let params = new HttpParams().set('username','test#mail.com').append('password','1234');
this.http.get(apiUrl, {params}).subscribe(
res => {alert('success');},
err => {alert('fail');}
)
I already enabled the CORS in my API Gateway.
I hope you guys can help me to call my AWS API.
My current option method looks like this:
Integration Response
You are forming your request correctly in Angular.
The problem has nothing to do with the client side of your app, and everything to do with the way you set up CORS support in AWS.
Postman accesses your API ok because Postman does not enforce the "same-origin" policy that the web browser does, i.e. it bypasses CORS entirely.
For a browser to successfully make the request, the API must respond to an OPTIONS request on the same endpoint with a 200 return code, and include an Access-Control-Allow-Origin header on that response, either indicating the actual origin of the request or the wildcard '*'.
AWS's documentation on this is quite clear and extensive.
In API Gateway, under Resources-->Actions. The Actions dropdown has option to enable CORS. Check if CORS are enabled and you are allowing all origin.

Angular: HTTP GET request - OPTIONS 405 (Method Not Allowed)

I'm trying to make an HTTP GET request to my API, and it returns OPTIONS 405 (Method Not Allowed) and
Access to XMLHttpRequest at 'apiurl' 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.
Below is my code:
const header = new HttpHeaders();
const request_header = header.append('Authorization', this.token.toString());
console.log(request_header.get('Authorization'));
this.urlList = buildUrl('myurl/', {path: 'mypath'});
return this.http.get(this.urlList,{headers: request_header} );
I've tried to do the same in Postman, C# Console App, and in ASP.NET WebForms, it worked perfectly, but in Angular I get the error mentioned above. I have a HTTP GET request for my login also in TypeScript which WORKS PERFECTLY.
**Note: I do not have access to the backend, but based on C# and Postman it works just fine.
UPDATE:
Thank you guys, just to let you know I ended up using Flask with angular to make requests and it is brilliant.
This is a CORS issue. Your webserver hosting the REST APIs is running on a different domain than the webserver hosting the Angular static files.
Make sure you are not running your Angular on localhost and REST APIs on a separate domain or something similar. Ideally you should run both from the same domain.
Configure the REST API hosting server to allow the CORS from the Angular hosting server (localhost).
Postman wouldn't have any problems getting the resource here.
But as your request from Angular server is getting a Cross Origin error, you need to get the backend set with the API having your angular server address set in the Access-Control-Allow-Origin header for you to get the access of the requested resource.
If you set the Access-Control-Allow-Origin header with *, it would allow any server to get the resource but this isn't secure as anyone could get your resources without your permission.

Access to fetch at 'https://api.kendozone.com/auth/login' from origin[…] has been blocked by CORS policy [closed]

I am coding a Angular 6 / Lumen 5.7 Application
Lumen app is in a AWS server --> https://api.kendozone.com
Angular app is hosted by github pages --> https://v2.kendozone.com
It works great in local, but when I push it to production, I can't get rid of CORS issue, when I try to make a login post, I get:
Access to fetch at 'https://api.kendozone.com/auth/login' from origin 'https://v2.kendozone.com' 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.
api.kendozone.com/auth/login:1 Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
I already tried several things:
https://www.codementor.io/chiemelachinedum/steps-to-enable-cors-on-a-lumen-api-backend-e5a0s1ecx
https://gist.github.com/danharper/06d2386f0b826b669552
I now removed all those scripts, and installed a lumen package:
https://github.com/barryvdh/laravel-cors
Now, I don't have any idea left... What should I do ???
It seems to me that the simplest way would be to define a Access-Control-Allow-Origin header on your lumen application allowing access from https://v2.kendozone.com.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for exact formatting and possibilities.
The problem you may be running into is that your cors configuration does not send back those headers on the OPTIONS request before your actual request, or there is a redirection before hitting the actual lumen endpoint that is stripping the headers.
The method you posted at https://www.codementor.io/chiemelachinedum/steps-to-enable-cors-on-a-lumen-api-backend-e5a0s1ecx should work. Please make sure the Access-Control-* headers are sent back for all your requests.

Magento2 - Web API Get Request from Localhost has no Access-Control-Allow-Origin

I am building a PWA and am trying to fetch data from my Magento2 Website.
Now I managed to connect to the server using Postman.
But now that I am trying it with my ReactJS PWA it gives me the following messages:
OPTIONS https://[URL]/rest/V1/categories 400
AND
Failed to load https://[URL]/rest/V1/categories: 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:3000' is therefore not allowed access.
I tried installing a Module that lets me allow this in magento:
https://github.com/splashlab/magento-2-cors-requests
But this also didn't help me.
Is there anything else I need to do to allow my https://localhost:3000 to access this API?
-edit
Also when I deploy my application to Firebase I still get the same error.

Create React App Allow Access Control Origin Issue

I deployed a weather app created with create-react-app. In development I would use the chrome extension allow access control origin. Now that it is deployed with github pages, I'm getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://boka44.github.io' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
It seems like I need to add a header to my server, but I'm confused as to how and where to add it.
My code is here: https://github.com/Boka44/weather
Any help would be deeply appreciated.
The API endpoint (The one that provides weather information) which you are calling has disabled CORS which means you can never make a client-facing call (i.e. through a browser) because the browser will block the call.
You have 2 options here:
If you can change the API endpoint: you can add a CORS header to allow origins from your client app's domain.
If you cannot change the server code: Create your own API endpoint that calls the original API endpoint and have your client app call your own API. (i.e. You just make a proxy server that directs your calls to the original API endpoint). In this case, you can specify a CORS header on your server to allow calls from your client app domain only.
Dark Sky API docs says that it is not allowing CORS. So you can't get data to your client side code from their server. So create a proxy server in PHP or some other platforms, which will make an api call and produces the JSON formatted response.

Resources