Using API with Laravel Localhost

Question
1

Hello,

I’m trying to access the API Retrieve POI list, but every time I send a request with my website I get the following error: “CORS-header ‘Access-Control-Allow-Origin’ does not match with ‘https://127.0.0.1:8000’”.

Has anyone encountered this problem before and knows how to solve it?

2

Our CORS configuration should allow anyone to access the API from any context but you do need to set an API key and some ‘user-agent’ headers are banned.

If you are accessing the API via javascript (e.g. client side code on a web page) it’s different to accessing the API via a backend script (like PHP etc). You mentioned Larvel but if it’s just javascript you’re using it shouldn’t matter.

I just tested the following example running on http://127.0.0.1:8000 - it’s working in Chrome and Firefox (note that I’m not accessing it via https though)

<html>
<body>
    <ul id="results"></ul>

    <script>
        let results = fetch('https://api.openchargemap.io/v3/poi?key=testkey')
            .then(response => response.json())
            .then(results => {
                const el = document.getElementById("results");
                for (let r of results) {
                    el.innerHTML += "<li>" + r.AddressInfo.Title + "</li>"
                }
            });

    </script>
</body>
</html>
3

Thank you for the quick reply!

I am using Javascript to access the API, but i’ve got no idea why it’s trying to use https. So the main problem could be that my laravel tries to use HTTPS instead of just HTTP?

This is the code I used to get my result:

let responseEV = await fetch("https://api.openchargemap.io/v3/poi?latitude=" + location.lat + "&longitude=" + location.lng + "&distance=" + straal + "&distanceunit=km&key=MY_KEY")
                .catch(err=>alert(err));

I tried your code, but I got the same result as with my own. When I inspect the site in firefox it says as requestheader:
afbeelding

and the respons header says:
access-control-allow-origin: http://127.0.0.1:8000

I can’t find why it says that it’s https instead of http.

4

Well https was a difference but I’ve just tried it with https myself and it’s working fine (Chrome and Firefox). The https part is appearing because your local development server (serving your web page) is running with https configured.

I don’t think the fact you are using Larvel (or PHP etc) is related because this code is javascript and running in the browser (not server side).

Do you get the same result in different web browsers?

If I look at the response headers we are sending back we do accept any origin (we reflect the origin you send):

image
image720×354 14.6 KB

5

I installed Chrome to test it and it worked.
After testing firefox in save mode I noticed one of my extensions is causing the problem…
Sorry for the troubles…

6

Great, glad you got it working!