Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari 10.1: XMLHttpRequest with query parameters cannot load due to access control checks

When trying a CORS request on Safari 10.1, on an URL which includes query parameters (e.g. https://example.com/api?v=1), Safari says

XMLHttpRequest cannot load due to access control checks

Chrome/Firefox works fine.

On requests from the page without the ?v=1, Safari works fine too.

I tried changing the server response header from

Access-Control-Allow-Origin: https://example.com

to

Access-Control-Allow-Origin: https://example.com/api?v=1

but that breaks Chrome.

Any suggestions?

like image 718
Marius Avatar asked Apr 20 '17 10:04

Marius


3 Answers

You're running into CORS issues.

Some possible causes:

  • The header Access-Control-Allow-Origin can only be set on server side, not in your clients script. (You did not make clear you did that correctly.)
  • Are you sure the protocol (http vs https vs maybe even file) is exactly the same?
  • If you may have multiple sub domains you need to setup your config (e.g. Apache) with something like "^http(s)?://(.+\.)?test\.com$ .
    The ^ marks the start of the line to prevent anything preceeding this url. You need a protocol and allowing both here. A subdomain is optional. And the $ marks the end of line (you don't need to set sub-pages, because origin is only host based).
  • As stated here adding Access-Control-Allow-Headers: Origin to the server configuration as well may be a solution. Try to compare the actual requests made my Safari to the successfull requests done by Firefox or Chrome to spot possible missing Headers as well (and maybe compare them to your server configuration as well).
like image 75
Seika85 Avatar answered Oct 23 '22 18:10

Seika85


If anyone comes across this error, it just occurred in the application I was building. In my case, it turned out to be a trailing / in the uri, which caused a 301 response, which was for some reason interpreted by Safari as a 500 response.

like image 22
Christian Kaal Avatar answered Oct 23 '22 19:10

Christian Kaal


Trying following might work -

Access-Control-Allow-Origin: <origin> | *
like image 2
mdeora Avatar answered Oct 23 '22 19:10

mdeora