0

I'm trying to perform an ajax request to a third party api from my web site using javascript (On the client side) and I receive a No 'Access-Control-Allow-Origin' error. When trying to access this from node.js project everything is working fine. More over, when opening Chrome with --disable-web-security everything is working fine as well. Any information about this issue will be appreciated :-)

Tal Humy
  • 1,197
  • 1
  • 18
  • 41

1 Answers1

1

You cannot access a third-party API without using CORS. CORS adds special headers (e.g. Access-Control-Allow-Origin) to the HTTP response. This makes sure, that the API can control which front-end can make a request to it. This means, however, your API needs to recognize your front-end URL and accept requests from it.

You can (a) use CORS on the API side (changes are necessary on the API) or (b) use your server-side language to make the API request (e.g. PHP makes the request to the API and the front-end receives the response from the PHP back-end). Everything else is prohibited by the browser's security settings.

You can read more about CORS e.g. here.

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
  • 1
    There are few things I'm struggle to understand. 1. If the third party API disable CORS , will the request from the server side and client side will be rejected? 2. If the third party API enable CORS , why requests from the client side will be rejected from the browser while request from server side (for example PHP) will not be rejected? The thing that I struggle to understand is why the request from the client side (browser) will be rejected – Tal Humy Oct 16 '17 at 13:51
  • The problem are the security settings of the browser. The browser disallows non-same-origin ajax requests. It is only possible to make an Ajax call to another domain, if the other domain has special CORS settings enabled (i.e. explicitely allowing your domain). This is made, because you could easily make ajax requests to `backend.com` from `evil.com` and attaching authentication cookies. Therefore the browser does not let you do that. If you make the request with PHP or cURL, you won't have any restrictions about same-domain as in the browser. – ssc-hrep3 Oct 16 '17 at 14:52
  • 1
    First of all , Thank you for your help. Just want to make sure I got it : 1. Lets say I have a server on "mydomain.com/api". Since its an open api I want to enable clients to access it so I enable CORS to all (*). Even though CORS is enabled a javascript command from domain : "otherdomain.com" will not be approved? 2.Is the browser reject the request before it is being send to the server, or the server rejecet it? – Tal Humy Oct 17 '17 at 08:18
  • If you define the CORS settings to allow every origin (`*`) on the API, then it will work in browsers. But if you have an authentication on this public API, you need to make sure that you do not use cookies (or at least use a CSRF token in the header). If you attempt to do a cross-origin Ajax request from the browser, the browser will actually first make an `OPTIONS` call and ask the server if the front-end is allowed to do the actual call. The browser evaluates the response of the OPTIONS call and then makes the actual request, if it is allowed to do so according to the CORS settings. – ssc-hrep3 Oct 17 '17 at 08:31
  • The `OPTIONS` request as well as the actual e.g. `POST` request are visible in the Networks tab of e.g. the Google Chrome Dev Tools. CORS is actually just the preflight with `OPTIONS` with the special headers (starting with `Access-Control-`) in the preflight as well as in the actual request. – ssc-hrep3 Oct 17 '17 at 08:33