Bypassing CORS issue in Chrome [duplicate] - javascript

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)

Related

API request status 200 not accessable

I am facing a strange issue. I have a java spring app running on the PORT 8080 and Angular app running on port 3000. While making the request its returning status 200 and can find response in the browser network tab, but console is throwing error XMLHttpRequest cannot load 'http://localhost:8080/apiname'. No 'Access-Control-Allow-Origin' header is present on the requested resource. origin 'http://localhost:3000/#/home' is therefore not allowed access. Is there any way to get this working without making any changes on the server side. Any help is appreciated
It sounds like you have one service on your machine trying to talk to another, and for whichever reason they don't identify as being in the same domain. Usually you will have to add a cross domain policy for domains that aren't within the same environment.
The Access-Control-Allow-Origin header is a CORS standard that instructs you who can send communication over cross domain policies.
You can only host one website on port 80, and it wouldn't quite make sense to have two sites. One SSL(443) and one HTTP(80) so this may be why it's in effect, are because of your ports.
For the simple answer, add the header into your server side response and be sure to add that domain and port, to your cross domain policy.
I'd encourage you also to try to look at why you're having to perform these communications. You could put the two services into one site and remove the need. That's your easiest answer for a non-server change.
Otherwise, you will have to add it. It's a security protocol. There are steps to remove it, but that would open you up to a myriad of security vulnerabilities.
Use the following link to read more, and you can use * as opposed to disabling for another approach.
https://enable-cors.org/server.html
Access-Control-Allow-Origin: *
The above header will allow all cross domain policies, implemented server side.
You can enable it in firebox by adding extension
https://addons.mozilla.org/en-US/firefox/addon/cross-domain-cors/
You must enable CORS headers server-side or use a proxy (own, or a simple service like crossorigin.me for development purposes) that serves proper CORS headers.
In order to enable CORS in Express.js app, please see cors middleware - for simple use cases, a single line of code is enough - app.use(cors()).
For desktop or in-app usage, you may ignore CORS headers if you like as you have greater control over HTTP client.

How does CORS plugin / --disable-web-security work on browser?

I'm sure I'm not the only one who have used/uses CORS plugins for browsers or --disable-web-security flag while making API calls to external (or even internal) API endpoints. I used this plugin to make Google Maps related API calls. But within the same application, ParseSDK API calls needed no CORS or --disable-web-security flag.
My question is : Why are these endpoints acting differently and how does CORS plugin solve the problem (even though we don't have control over those APIs)?
Thanks in advance.
Well, what that plugin does is highly irresponsible; It actually disables the same origin policy, which enforces that a website on a specific origin can only make requests to that origin.
The same origin policy actually just prevents a website from reading the response of a GET/POST request, the request itself is made, because it's considered safe.
Over time this good security feature became a burden and people used workarounds like JSONP.
So we got a new, standardized way to access foreign origins:
CORS (Cross-Origin Resource Sharing) is a mechanism that allows a web server to specify that another origin is allowed to access its content. This is done with Access-Control-Allow-Origin: example.com which allows example.com to access the response even if the response is from a different origin.
The Access-Control-Allow-Credentials: true would also allow the credentials, which includes cookies and HTTP Basic authentication to be sent within the request.
You can also specify a wildcard for Access-Control-Allow-Origin: *, which allows all websites to access this response. However when you do this you have to specify Access-Control-Allow-Credentials: false, so no credentials are exposed.
This is the only correct way to implement a public accessible AJAX API in the internet.
However this plugin just simply disables the same origin policy completely which is extremely dangerous.
The link you posted (did you read the description?) specifies exactly what the extension does - it adds the Access-Control-Allow-Origin: * header to all responses. This is a CORS header that normally the server sends to notify the browser that you are allowed to make requests from arbitrary origins.
Parse SDK probably supports CORS on their server end.
Just for your information, when most people say CORS they are not referring to a browser extension. They're referring to the web standard called CORS. Documentation below.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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.

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

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

The concept of CORS and should I enforce an Origin header?

As far as I understand CORS cannot exactly protect you in the way that you can really be sure who the caller is. Because the caller can send any ORIGIN header he wants. Actually I read somewhere you cannot set the origin header via javascript as it is a restricted header - but I'm not quite sure of that. Anyway.. if you were to implement your own HttpClient you could easily forge your origin header and therefore consume services which you are not supposed to consume.
Secondly if no Origin header is specified the request works as well. For example I use Google Chrome's Postman Extension and it doesn't send any origin headers. In fact if you try to add one manually it doesn't send it over the wire.
Therefore...
...question 1 is: Should my application deny requests without any Origin header? And...
...question 2: How exactly does make CORS my REST service more secure?
There are browsers supporting CORS and not supporting CORS. (We are at the early stage of CORS, the implementations of the CORS specification across browsers are not consistent).
Not supporting CORS means when the browser detects a cross-origin request, the request is blocked and not sent to the server.
Supporting CORS means the browser applies the CORS policy: appends the Origin header before sending requests to the server and after receiving the response, the browser checks the Access-Control-Allow-Origin the decide whether to discard the response.
The same-origin policy is intended to reduce the risks of XSS attacks, this attack mostly happens on browsers, not likely to happen in HttpClient. The CORS policy is for relaxing the same-origin policy so that if you are the owner of both sites, you can leverage this policy to allow communications between your 2 sites.
 Tip Supporting CORS means that the browser has to apply the
cross-origin security policy after it has contacted the server and has
obtained the response header, meaning that the request is made even if
the response is discarded because the required header is missing or
specified a different domain. This is a very different approach from
browsers that don’t implement CORS and that simply block the request,
never contacting the server.
Extracted from this book
The point of CORS is to prevent (or allow) Javascript running on a different domain from sending AJAX requests to your API and using the user's authenticated session cookie.
CORS cannot replace proper authentication; all does is prevent the browser from acting as a confused deputy against your existing authentication scheme.

Categories