1

I've found simple tutorial how to make cross domain json call here

And it works perfectly fine, so i decided to use this example, just change url from:

var url = "http://api.myjson.com/bins/23xvb";

to

var url = "http://dl.sniper.pl/test.json"

Unfortunately changing it returns such an error (in chrome):

XMLHttpRequest cannot load http://dl.sniper.pl/test.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Googling that error didnt provide any answers to find a solution so here's the question: Why i get such an error and how to solve it?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Kalreg
  • 982
  • 1
  • 13
  • 27

2 Answers2

0

The http://dl.sniper.pl/ server must be configured to send the Access-Control-Allow-Origin response header in responses to requests for http://dl.sniper.pl/test.json.

But because that server isn’t sending the Access-Control-Allow-Origin response header, your browser is refusing to allow your frontend JavaScript code to access that response.

So you either nust configure the http://dl.sniper.pl/ server to send Access-Control-Allow-Origin or else you can make the request through a CORS proxy.

There’s an open CORS proxy you can make you request through by changing your code to this:

var url = "https://cors-anywhere.herokuapp.com/http://dl.sniper.pl/test.json"

That sends the request through the open CORS proxy https://cors-anywhere.herokuapp.com which adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the browser allows your frontend JavaScript code to actually access the response.

You can also easily set up your own CORS proxy using https://github.com/Rob--W/cors-anywhere/

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for an explanation of how browsers behave when you send cross-origin requests frontend JavaScript code using XHR or the Fetch API or AJAX methods from JavaScript libraries—and for details about what response headers must be received in order for browsers to allow frontend code to access the responses.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • Thank you for simple yet good explanation. I used in my code your proxy url and it works however i do not want to rely on third-party servers and still cant make it via .htaccess. I created a directory on server and put there botth json file and .htaccess like here: https://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/ It still doesnt work. Should i change it in .htaccess in most parent directory? – Kalreg Jul 11 '17 at 08:54
  • If you’re setting your Access-Control-\* headers with with Apache, you probably want to start troubleshooting by running 'a2enmod headers' to make sure you have the headers module enabled. But anyway at this point, if that doesn’t work, you probably want to create a separate new question and tag it with 'apache'—because what you seem to need help with now is a different more-specific problem than the general problem described in the question here. (And you so you get more specific help with with it from Apache experts here by raising it as a separate question and tagging it.) – sideshowbarker Jul 11 '17 at 09:08
  • It may be a problem with apache, however i am just end-user of server and i do not have any priviliges to change apache settings. I probably can test those settings but i am not sure how can i do it. Can you assist? – Kalreg Jul 11 '17 at 19:32
  • If you post a separate new specific question, I’m be glad to assist with that, and lots of other people at Stackoverflow could assist with it you too. You’ll get more help and better help by doing that than you will by burying a request for assistance in a comment for the more-general question here and going back and forth with it in a conversation thread here – sideshowbarker Jul 11 '17 at 20:25
-1

you should configure you server todo this in your htaccess u need something like this

<RequireAll> Require all granted </RequireAll>

demopix
  • 159
  • 6