0

I'm trying to call an API in JavaScript, if I write it in the URL bar, it works but if I use my code, it has CORS policy problem. I don't have any access to the server and I should find a way to solve in the client side. This is my code:

var xhr = new XMLHttpRequest();

    var url = 'http://api.openweathermap.org/data/2.5/weather?q=London&APPID=My-API-Key';
    xhr.open('GET', url, true);
    xhr.withCredentials = true;
    xhr.setRequestHeader("APPID", "MY API Key");
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Origin', '*');
    //console.log(json);

    xhr.send();

    xhr.onload = function () {
        if (xhr.status != 200) {
            alert(`Error ${xhr.status}: ${xhr.statusText}`);
        } else {
            alert(`Done, got ${xhr.response.length} bytes`);
        }
    };

    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            alert(`Received ${event.loaded} of ${event.total} bytes`);
        } else {
            alert(`Received ${event.loaded} bytes`); // no Content-Length
        }

    };

    xhr.onerror = function () {
        alert("Request failed");
    };

</script>

and it has the error:

Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?q=London&APPID=My-API-key' from origin 'https://localhost:44399' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Anybody has Idea how to solve this error? where should I send my Origin or anything else as a header to get the correct response from the server? I should handle it in the client side and also I have written the Origin * in the header but still not working.

Best Regards

Aidin Abbasi
  • 19
  • 1
  • 4
  • Just search for "CORS" here on SO or Wikipedia or Google or ... – Andreas Oct 14 '19 at 09:26
  • Your API server will have to allow requests from different origins. Typically the server has to send response headers "Access-Control-Allow-Methods" and "Access-Control-Allow-Origin" to allow those requests. – Shivratna Kumar Oct 14 '19 at 09:29
  • I can see that your origin is null. Are you running it from file? Try running a server and run it from there. – a1626 Oct 14 '19 at 09:32
  • Actually I don't have access to the server, just have the API key to call it, it's not internal use. is there any way to solve it in client side? could I do anything or send something as a header? – Aidin Abbasi Oct 14 '19 at 09:33
  • I'm saying run your code from a server instead of from a file. – a1626 Oct 14 '19 at 09:35
  • Yes @a1626, I'm running from file, but I have uploaded in the main server and have used (not local server, the main server that our website is running on it) but still exactly the same error is occurring – Aidin Abbasi Oct 14 '19 at 09:36
  • In that case is it still saying origin null? If so, try creating a simple node server in your local to serve the file. You can use something like http-server(https://www.npmjs.com/package/http-server) – a1626 Oct 14 '19 at 09:38
  • @a1626 this is the error that is occurring when running on the main server: Access to XMLHttpRequest at 'https://......' from origin 'https://campus.macromedia-fernstudium.de' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Aidin Abbasi Oct 14 '19 at 09:38
  • @AidinAbbasi I checked your API response, it does allow cross origin requests. The problem is with the way you are calling the API. Either try running it from a localhost server or just try Origin value as "http://localhost:3000". When you are running from server, you do not need to send the Origin header explicitly. It should be sent automatically by the browser. – Shivratna Kumar Oct 14 '19 at 09:39
  • @ShivratnaKumar thanks man, actually this API is just for testing and solving my problem, the main API that I'm using is another one and the error that occurs in the main server is commented before your comment, please check that and tell me your idea. – Aidin Abbasi Oct 14 '19 at 09:41
  • In that case you better open a support ticket (https://openweathermap.desk.com/customer/en/portal/topics/681704-general/questions) – a1626 Oct 14 '19 at 09:42
  • I edited the question and now you can see the error when I'm running on local server. @a1626 – Aidin Abbasi Oct 14 '19 at 09:46
  • @a1626 you mean that the problem is not in my side? the server support should solve it? because when I try to write the API URL in the URL bar, it works. – Aidin Abbasi Oct 14 '19 at 09:48
  • Yup. Server controls CORS. – a1626 Oct 14 '19 at 09:48

1 Answers1

0

have you tried to use the "allow-origin: *" Header on your server ? It's maybe the cause of the problem (your server doesn't accept theses requests)

Martin Bonneau
  • 1
  • I don't have any access to the server, I'm using a free API to test and just get the key to use it, cant modify the server – Aidin Abbasi Oct 14 '19 at 09:32