Angularjs $http get fails, but request is succesful in postman and browser - javascript

I'm trying to access the Adobe TypeKit API's via javascript, using AngularJS.
Using $http.get(https://typekit.com/api/v1/json/kits?token=myToken) fails on authenticated requests, with error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
If I use $http.jsonp(...) un-authenticated requests are succesfull, this is probably due to Adobe's CORS policies, but as stated in the typekit documentation
For security reasons, authenticated API requests are currently unavailable with callbacks.
So, using jsonp, I can't access many of the endpoints provided by the API's.
What I don't understand is that the same exact request that fails in angular, succeds if I execute it with postman or with chrome itself. I tryied setting the request headers exactly the same as in postman, but didn't work. Tried all sorts of headers settings, but nothing changed.
Any thoughts?

can you disable the chrome web security and then give it a try.To disable the web security open your terminal and type the following /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --allow-file-access-from-files --allow-file-access --user-data-dir=~/chrome-test/ spec/runner.html

Related

CORS issue on GitHub when running git-receive-pack

I am trying to make the following requests on GitHub using a Chrome extension:
GET github.com/<user>/<repo>/info/refs?service=git-receive-pack
POST github.com/<user>/<repo>/git-receive-pack
Doing so, I receive a Bad Request Error (400). My understanding is that the error is due to the CORS policy. Actually, if I proxify the URL using CORS proxy servers (like this), there is no issue.
Is there any way of handling this CORS issue in the Chrome extension?
P.S. If I use the extension to make the same requests on GitLab (without using a proxy server), there is no issue.

Bypassing CORS issue in Chrome [duplicate]

This question already has answers here:
Disable same origin policy in Chrome
(35 answers)
Closed 1 year ago.
We are facing an issue where using Chrome request via XMLHTTPRequest is getting failed with below error:
Failed to load <server url>: No 'Access-Control-Allow-Origin' header
is present on the requested resource. Origin '<client domain>' is
therefore not allowed access.
This error is Chrome specific since we are not getting this issue in IE. Is there anyway to bypass this error in JavaScript.
Basically, for development purposes only, you can start the Chrome Browser in relaxed mode using the disable-web-security flag:
Here's how to do it on windows (Credit to https://alfilatov.com/posts/run-chrome-without-cors/)
Right click on desktop, add new shortcut
Add the target as "[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
Click OK.
The directory in 'user-data-dir' must have read/write permissions for Chrome.
You will get a warning banner in Chrome notifying about reduces security, because that is actually what you have here. USE ONLY FOR TESTING.
Note: This answer builds on the link-only answer by Franco Fontana which was deleted because of link-only but the link actually helped me.
No, fortunately there is not.
The same-origin policy is an security concept implemented by browsers to prevent Javascript code from making requests against a different origin/domain than the one from which it was served. So enabling developers to bypass this from Javascript would be a bad thing.
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Source: Cross-Origin Resource Sharing (CORS)
If you're in control of the API:
Add an Access-Control-Allow-Origin header containing the domain your requests are originating from.
If you're not in control of the API:
Ask the developer of the API to have your domain added to an Access-Control-Allow-Origin header.
EDIT:
Adding the correct header will not 'make the request an OPTIONS request while the server only accepts POST'.
The OPTIONS request is a preflight request to check to see if the CORS call can actually be made. If the preflight request has the correct header, the POST request will follow as you can see in the image below:
You can find all of the basic CORS information in the article Understanding CORS
Although its limited, can try to use CORS anywhere https://github.com/Rob--W/cors-anywhere or the chrome extension here that allows you to bypass CORS (make sure you turn this off when not testing as it will cause issues with requests from other websites)

How to prevent sending Origin HTTP header in Chrome?

Situation:
I have a production web server, let's say https://example.com, configured with CORS with limited set of allowed origins. The set does NOT include localhost origins.
On localhost, developers develop a page/module/whatever that needs to call the production web server via AJAX (even during development). To do that, they run Chrome with CLI arguments --disable-web-security --user-data-dir=chromeNoCors so that Chrome would send AJAX without Origin header.
The problem is that only GET requests are sent without the header. POST requests still contain the header, therefore the production server compares the header value (http://localhost:5678) with allowed set of origins and forbids access to requested resource.
Question:
Is it possible to somehow prevent sending of Origin HTTP header altogether?
I'm aware that there's a workaround to solve this situation by allowing "localhost" (or some specific host that developers will have to add to their /etc/hosts) to the set of allowed origins on production server but I'd like not to do this if possible.
if you guys use chrome try this extension
https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa
you can modify requests on the fly,even headers
I recommend that you setup a simple "proxy server" (short node.js or python script would suffice). Have this server forward all requests to your remote API server but delete the information about the origin in headers. This is a matter of simple regular expression.
This is simple solution that will be portable to different servers. On AJAX side, all you need is to change the hostname to localhost or IP of your testing proxy server.

Enabling Cross domain Access in WEBHDFS REST Api to be used by JavaScript?

I am trying to GET liststatus from the Webhdfs rest api, but getting the following error.
XMLHttpRequest cannot load http://<IP>:50070/webhdfs/v1/?op=LISTSTATUS. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
It loads successfully when I try to access through curl. But it fails when I try to get it using AngularJS $http.get.
Is there any way to enable Cross domain access in Hadoop core-site.xml or somewhere else?
If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.
When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Check it in Firefox browser it may work or else ..
I believe this might likely be that Chrome does not support localhost to go through the Access-Control-Allow-Origin -- see Chrome issue
To have Chrome send Access-Control-Allow-Origin in the header, just alias your localhost in your /etc/hosts file to some other domain, like:
127.0.0.1 localhost yourdomain.com
Then if you'd access your script using yourdomain.com instead of localhost, the call should succeed.
(or)
That's problem of the server. You have to setup response headers on server side.

CORS ajax request clarification

So I have an API deployed on a cloud service. For testing purposes I use various HTTP clients like Postman, Paw and RestClient to send request to my API and they all work just fine. But when I send an AJAX request from Browser either with jQuery, reqwset or any other, I get the following error:
XMLHttpRequest cannot load
{https://url/to/my/api/on/google-app-engine}. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8000' is therefore not allowed
access
So Why does an HTTP client work but browser throws an error? Is there any risk if I enable CORS on the server?
This is because of the “same origin” policy of web browsers. This prevents a script on one website to make requests on another website on your behalf.
Enabling CORS is safe as long as you trust the allowed client, which is probably not the case if the client is at localhost (since you have no control on localhost in general).
Special case: if there's no way for a client to perform changes on the server's domain, then it's safe to enable CORS in general.

Categories