[CORS]:' Access-Control-Allow-Origin' not allowing to get a cross-domain JSON?

Question

Actually, I want to get a JSON object from this url , I tried using XMLHttpRequest() in javascript but console logged this error: [CORS] The origin 'http://localhost' did not find 'http://localhost' in the Access-Control-Allow-Origin response header for cross-origin resource at 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-IN'.

But when I typed url in browser address bar, it loaded correctly! See the screenshot!

See my javascript code:

    <script>
        var url='http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-IN';
        var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    callback(null, xhr.response);
  } else {
    callback(status, xhr.response);
  }
};
xhr.send();
};
getJSON('http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-IN', 
function(err, data) {
  if (err !== null) {
    alert('Something went wrong: ' + err);
  } else {
    console.log(data);
  }
});

        </script>

Note: I can't control the server.

When you go directly in the browser, it's no longer a cross-domain request since you're directly visiting bing. Unless you can somehow get server-side code implemented to run the request, the only way to run cross-domain requests from front end code is to manually disable browser security settings. — jmcgriz, Jun 20 '18 at 15:56
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — skyline3000, Jun 20 '18 at 17:11

score 3 · Accepted Answer · answered Jun 20 '18 at 16:10

You can view the information on what CORS is here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

As to your problem, you can solve it by proxying your requests through services like https://cors.io. For example, run this in your console:

fetch('https://cors.io?http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-IN')
.then(res => res.json())
.then(data => console.log(data))

Please keep in mind that it's not ideal solution as your code will depend on a 3rd-party service in this case. Which is ok for some personal home projects, but not for big corporate ones.

Proxy solution helped me, I just wrote a php script which gets json from the url and uploaded it to my server, and changed my javascript code such that it fetches json from the php file on my server. So, there's no 3rd-party service included. — aryaman, Jun 22 '18 at 07:39

score 1 · Answer 2 · answered Jun 20 '18 at 15:59

1

You can add https:// in the url instead of http://. This will fix your issue.

You can also open your chrome browser with

chrome.exe --allow-file-access-from-files --disable-web-security

in Windows Run.

answered Jun 20 '18 at 15:59

KRISHNA PATEL

135
5

"_You can add https:// in the url instead of http://. This will fix your issue_", this didn't worked and I am going to use my web app in mobiles too, so `chrome.exe --allow-file-access-from-files --disable-web-security` is also not a solution. – aryaman Jun 21 '18 at 06:22
this will definitely help https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/ – KRISHNA PATEL Jun 21 '18 at 18:12
What do you mean? @KRISHNA PATEL , I tried putting `https://` instead of `http://` in the url but that didn't worked, and we can't do `chrome.exe --allow-file-access-from-files --disable-web-security` as web app is running on phone(android. – aryaman Jun 22 '18 at 07:32

score 0 · Answer 3 · answered May 30 '19 at 17:54

I got this error when playing with AWS serverless using S3 bucket. after adding below in S3/bucketname/permission/CORSconfiguration the following:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

[CORS]:' Access-Control-Allow-Origin' not allowing to get a cross-domain JSON?

3 Answers3