14

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.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
ak0053792
  • 523
  • 1
  • 5
  • 18

3 Answers3

9

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.

Marcel
  • 15,039
  • 20
  • 92
  • 150
4

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:

OPTIONS before POST

You can find all of the basic CORS information in the article Understanding CORS

rickvdbosch
  • 14,105
  • 2
  • 40
  • 53
  • 1
    Adding Access-Control parameter will make the request as HTTP OPTIONS and server only supports POST. – ak0053792 Feb 06 '19 at 22:42
  • 1
    Nope, it will not. The `OPTIONS` request is a [preflight request](https://developer.mozilla.org/en-US/docs/Glossary/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. – rickvdbosch Feb 06 '19 at 22:45
0

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)

cb64
  • 825
  • 8
  • 16