I'm having troubles with setting up mangopay on my react App. I'm getting this error when i try to fetch all cards of a specific user :
Access to fetch at 'https://api.sandbox.mangopay.com/v2.01/oauth/token' from origin {URL} 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.
POST https://api.sandbox.mangopay.com/v2.01/oauth/token net::ERR_FAILED
I'm trying to do to it as so:
const listAvailableCard = () => {
const cards = mangopay.Users.getCards(resp.UserId);
return cards;
}
Does anyone know how to solve this issue. Considering that i already tried on both SSL certificated serve and not.
Thank you.
Vincent
The error you're seeing is a security error, however, it's not related to your request being http/s. Its known as a CORS (Cross-Origin Resource Sharing) error and has to do with blocking requests that go across origins. i.e one website calling on another website for resources.
So if you make your request in the browser from vincent.com to api.mangopay.com the request will be blocked because vincent.com isn't an origin that Mangopay trusts.
To avoid this error the best option is to make the requests to Mangopay from a server and then query your server from your client for the results.
You can read more about CORS and the related errors at these links:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
Related
I needed to use the StackOverflow API to retrieve some data from the site. Actually, when I tried the first time to use the API I got an exception due to CORS policy.
Access to fetch at 'https://stackoverflow.com/users/myID/reputation'
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 understand that the reason why my request was blocked was that the header was not in the response. However, does not StackExchange API attach in the response header Access-Control-Allow-Origin? I'm doing something wrong in how I'm invoking the request?
does not StackExchange API attach in the response header Access-Control-Allow-Origin? I'm doing something wrong in how I'm invoking the request?
The Stack Exchange API permits client-side requests, but the page you're requesting is not the Stack Exchange API - it's just a plain Stack Exchange page, not the API endpoint designed for such things, so it doesn't have the required header.
If you want to use the API properly, go through the documentation here and choose the endpoint you need. For an example using my user ID, one might use the following code:
fetch('https://api.stackexchange.com/2.2/users/9515207/reputation?site=stackoverflow')
.then(res => res.json())
.then(console.log);
api.stackexchange.com has the proper headers: access-control-allow-origin: *, which allows for client-side scripts to request it.
since this request is for a trial project, can I implement a proxy using a free-tier of some platform? I see a lot of suggestions for Heroku but I'm not very familiar with that platform
For the more general case of a server that doesn't set the required headers, if you wanted to use one of their responses client-side, you would have to bounce the request off a relay server. You could either make your own app on Heroku (a good free option), or use something like https://cors-anywhere.herokuapp.com/
I'm a n00b trying to learn React. I'm building a website that uses Etsy's APIs. Registered an app there and everything. They have a page that talks about CORS and proxying here: https://www.etsy.com/developers/documentation/getting_started/jsonp
So for example, I'm trying to do a fetch on a store's listings:
fetch('https://openapi.etsy.com/v2/shops/[shopId]/listings/active?api_key=[apiKey]')
But that violates the browser's CORS policy. No problem, says the documentation on Etsy. You can always use their proxy: beta-api.etsy.com. So I add that to my package.json file:
"proxy": "https://beta-api.etsy.com/"
And then I change my fetch line:
fetch('/v2/shops/[shopId]/listings/active?api_key=[apiKey]')
But CORS is still being violated in the browser.
Access to fetch at 'https://www.etsy.com/shop/beta-api/v2/shops/[shopId]/listings/active?api_key=[apiKey]' (redirected from 'http://localhost:3000/v2/shops/[shopId]/listings/active?api_key=[apiKey]') 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 don't want an opaque response, either, so doing "no-cors" really doesn't help. Does anyone have any recommendations on how I can at least get a local website up and running?
You are getting that error because your server has set Access-Control-Allow-Origin to restrict cross-domain traffic. You are sending your request from your localhost so that is considered cross-domain.
If you are able to change your server settings to set Access-Control-Allow-Origin: * then you can make those requests without a CORS error but I don't suggest doing this.
The best solution would probably be a proxy server. You can use cors-anywhere heroku app to easily do this.
Excerpt from Medium Article on this issue
The cors-anywhere server is a proxy that adds CORS headers to a
request. A proxy acts as an intermediary between a client and server.
In this case, the cors-anywhere proxy server operates in between the
frontend web app making the request, and the server that responds with
data.
Similar to the Allow-control-allow-origin plugin, it adds the
more open Access-Control-Allow-Origin: * header to the response.
Say your frontend is trying to make a GET request to:
https://joke-api-strict-cors.appspot.com/jokes/random
But this api does not have a Access-Control-Allow-Origin value
in place that permits the web application domain to access it.
So instead, send your GET request to:
https://cors-anywhere.herokuapp.com/https://joke-api-strict-cors.appspot.com/jokes/random
The proxy server receives the
https://joke-api-strict-cors.appspot.com/jokes/random
from the url above. Then it makes the request to get that server’s
response. And finally, the proxy applies the Access-Control-Allow-
Origin: * to that original response.
I have a React.js app that I am hosting on a cPanel that does not allow a back-end within the application. Wondering if I can get sendgrid to work without the back-end? Has anyone gotten this to work previously?
I currently get the following error:
Access to fetch at 'https://api.sendgrid.com/v3/mail/send' from origin '
https://angelospizzaharvard.com' has been blocked by CORS policy: Response
to preflight request doesn't pass access control check: The 'Access-Control-
Allow-Origin' header has a value 'https://sendgrid.api-docs.io' that is not
equal to the supplied origin.
Have the server send the header with a valid
value, or, if an opaque response serves your needs, set the request's mode
to 'no-cors' to fetch the resource with CORS disabled.
Navbar.js:427 TypeError: Failed to fetch
From this link sendgrid docs, it seems that it could only be called from a back-end server.
I succesfully installed "JWT Authentication for WP REST API" and followed (and reviewed multiple times) the instructions for setup correctly.
My React app does authenticate via the /jwt-auth/v1/token-endpoint.
I get a token back and store this in my localStorage.
All of my API-calls get added an authorization header as follows from this point on:
Authorization: Bearer mYCust0mToken
In the browser, this triggers preflight requests to the server (which is a remote one), that all fail. Basically logging in kills all of my API-requests.
I'm now getting 405's stating the following:
Access to fetch at
'https://mywebpage.com/wp-json/wp/v2/posts/'
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.
I run WP inside a subdir, so I have two .htaccess files, one in the root, one in the wp/-directory. I've tried putting the suggested .htaccess-changes of the descriptions in both files, on several positions of the file, but still no luck.
I've also tried setting Allow-Origin headers to "*", just for the sake of testing. I did that in both the .htaccess-files, but also in my PHP.
Anyone out there that got "JWT Authentication for WP REST API" up and running and willing to tell how?
Following Restangular's documentation and includes an example of this:
// GET to http://www.google.com/ You set the URL in this case
Restangular.allUrl('googlers', 'http://www.google.com/').getList();
I am trying to do the same for angel.co
$scope.trial = Restangular.allUrl('googlers', 'https://api.angel.co/1/users/267770').getList();
And keep getting error
XMLHttpRequest cannot load https://api.angel.co/1/users/267770. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
Any solutions?
The server (api.angel.co) is not responding with Access-Control headers which results in this error.
When sending XHR requests to domains different from the origin domain web browsers are checking if the service allows this. In your case api.angel.co would need to include the header Access-Control-Allow-Origin: * as part of the response (which it does not).
Assuming you cannot change api.angel.co, an alternative would be to build a server-side proxy (e.g. in node.js) which allows Cross-Origin Resource Sharing.
Check out this great article about Cross-Origin Resource Sharing (CORS).