Access to IBM Weather API with PHP works, but with JS it does not work

Question

I access to IBM Weather API in my application.

When I try to access with PHP:

$auth = base64_encode("<username>:<password>");
$context = stream_context_create([
"http" => [
    "header" => "Authorization: Basic $auth"
]]);
$homepage = file_get_contents("https://twcservice.eu-gb.mybluemix.net/api/weather/v1/geocode/49.14/15.00/forecast/daily/3day.json?language=en-US&units=m", false, $context );
echo($homepage);

It works.

But when I try to access with Javascript:

let headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", "Basic " + btoa("<username>" + ":" + "<password>"));
fetch("https://twcservice.eu-gb.mybluemix.net/api/weather/v1/geocode/"+lat.toFixed(2)+"/"+lng.toFixed(2)+"/forecast/daily/3day.json?language=en-US&units=m", {headers: headers})
.then(function(response) {
    console.log(response);
    return response.json();
})
.then(function(json) {
    for(let i = 0; i <= 3; i++) {
        console.log(json['forecasts'][i]['dow']+" - "+json['forecasts'][i]['narrative']);
    }
});

It gives me the CORS error message.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://twcservice.eu-gb.mybluemix.net/api/weather/v1/geocode/49.14/15.00/forecast/daily/3day.json?language=en-US&units=m. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://*.ibm.com, https://*.ibmcloud.com’).

I don't understand why.

Thanks for help!

If the IBM Weather API is scared about stealing its content, why does it work with PHP?

I don't get it.

Possible duplicate of [CORS error with Javascript but not with Python/PHP](https://stackoverflow.com/questions/40134558/cors-error-with-javascript-but-not-with-python-php) — Randy Casburn, May 25 '19 at 18:35
Please read up on CORS. This isn't about IBM, this is about security in your browser. Your browser is preventing this from happening - not IBM. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — Randy Casburn, May 25 '19 at 18:52
The browser prevents me against something what I write to code, so I want it. — John Doe, May 25 '19 at 19:04

score 0 · Answer 1 · answered May 29 '19 at 04:45

@John Doe

This is CORS issue. Servers can be configured to not allow browsers to make requests from different domains. The Mozilla document about CORS is a great read if you're unfamiliar with the topic.

Note that you'll only hit CORS errors if you're doing something through a browser. So attempting to redo the same API call in a terminal with curl will often still work. Making things even more confusing!

Was your PHP script run locally, through a terminal?

If you're tinkering around, there are proxy services that bypass CORS, like CORS-anywhere. Try hitting https://cors-anywhere.herokuapp.com/https://twcservice.eu-gb.mybluemix.net instead of the API you currently have. Note that this isn't meant for anything production worthy. Just trying to help you get a little farther along.

Access to IBM Weather API with PHP works, but with JS it does not work

1 Answers1