I'm using angularJS for POST from localhost to some API. but I got this error message:
XMLHttpRequest cannot load "...API link..." Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
I can post to the API when I use "Allow-Control-Allow-Origin" chrome extension. But this is just temporary, This way only works when I use this extension on my borwser. But my users got this problem when they use in their own browser.
How to fix this from client side.
I don't think you can fix this issue client side. The API server controls who can access what (using the Allow-Control-Allow-Origin header) so you have to change it there.
The CORS (Cross-Origin Resource Sharing) Request should be enabled in your server i mean in your api like header("Access-Control-Allow-Origin: *");
, otherwise if you still want to access the request from another domain (localhost) if api host is different , in your js code try to use jsonp
here is the documentation
https://docs.angularjs.org/api/ng/service/$http#jsonp
Related
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 an AngularJs website and when I am trying to post data then when I am opening my website without using www then I am getting
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
Otherwise, I am not getting any error.
I tried to search and found that I should implement CORS on my backend which is in NodeJs but can anyone please tell me how can I only implement CORS Headers such that for both www and without, it would work but for any other domain trying to access my API must result in preflight error.
I am trying to do this because I read here which-security-risks-do-cors-imply that allowing all domains can increase security overhead for my website which I do not want.
Thanks.
I'm afraid this is not something you can tweak just in your client-side code. In order for cross-origin requests to work, you need to set an http response header: it's the server, who serves the resource, who will need the change, not the client side code from angularJs.
I believe that you should update your question stating what your server side language is and how are you handling http requests in the server side. As far as I know, just adding a header like:
Access-Control-Allow-Origin: http://client.domain.com
In your responses will do the trick. Where client.domain.com is the domain of your client, angularJs application.
For my personal website, I'd like to create a page summarizing my social presence.
I used Postman to make sure all my queries are valid.
So I made simple call to get my last post on twitter.
Everything works find on Postman, so there isn't any Authorization issues.
But when it comes to implement it on my client (using AngularJs ), I'm getting this error:
OPTIONS https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965 400 ()
XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965. Response for preflight has invalid HTTP status code 400
I know it may be related to How does Access-Control-Allow-Origin header work? but I can't configure the server as I subscribed a shared hosting
(One.com).
I tried to reset my $httpProvider default values in vein.
It seems Twitter API doesn't support CORS headers, and that's why your preflight tests are failing:
https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276
I'm trying to fetch the list of official images from docker hub using v2 api. If I try to do curl or use postman, I get the response correctly, but when I try to fetch the list using angularjs service, I get the following error
XMLHttpRequest cannot load https://hub.docker.com/v2/repositories/library/?page=8&page_size=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Can someone suggest solution for this. How can I enable cors for this?
CORS could be enabled on the server side, and this is not your case. What you could do is :
1) use a proxy, for instance NGNIX, and make Sure that all request Made to localhost/whatever are redirected to hub.docker.com . This way you can "cheat" Cross-origin block
2) if you need a temporary and dirty solution you could more simply install chrome/safari plugins to bypass CORS security check
There is only one way to bypass CORS is send request through a cors proxy like http://crossorigin.me
It's an opensource project and you can build your own proxy server by download the full source code from here: https://github.com/technoboy10/crossorigin.me
Reason behind the issue :
As per my understanding you are doing an AJAX call to a different domain than your page is on. So, the browser is blocking it for security reasons as it usually allows a request in the same origin.A tutorial about how to achieve that is using CORS.
When you are using curl or postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
I'm trying to make a POST request between two sites.
I've seen the need to change header of request on server side using the access-allow. My problem is that when I send request I can't see this modification in the response header.
If I go on directly on page the headers are change. If I sent request with GET, I can see too that the headers has been changed. Maybe there is server configuration of http which is forbidden across domain POST request?
I'm using a Ngnix server that serves Drupal sites.
As far as I know, the header you should change is the response header of the site that receive the request (or site 2). Thus, it allows the client (or site 1) to perform a CORS request, adding the header "Access-Control-Allow-Origin" and the domain of site 1 (or '*') into the response.