Fetching API data on localhost with VueJS

Question

So this is my function, really simple:

mounted: function(){
      this.$http.get('http://localhost:80/gaming/api/game/1').then((data)=>{
        console.log(data.body);
      });
    }

My VueJS app runs on port 8080, and my PHP runs on XAMPP on port 80.
When I try to fetch something from my API I get the following error:

Uncaught (in promise) Response {url: "http://localhost:80/gaming/api/game/1", ok: false, status: 0, statusText: "", headers: Headers, …}

What can I do?

check the requests(network) in the browser's developer tools, maybe you have a problem with [preflight requests](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) — Evhz, Mar 25 '18 at 16:23
@Evhz I've checked the network tab and the request seems to appear there with the correct response. But the promise is failing in VueJS. — Nir Tzezana, Mar 25 '18 at 20:38

score 2 · Accepted Answer · edited Dec 24 '18 at 06:57

2

add header("Access-Control-Allow-Origin: *"); to allow CORS on php. good luck

edited Dec 24 '18 at 06:57

Brane

3,257
2
42
53

answered Mar 26 '18 at 11:48

TheDude

257
1
9

what if is only vue app? – Brane Dec 23 '18 at 19:39

score 1 · Answer 2 · answered Mar 25 '18 at 16:27

1

Did you enable CORS? Use Developer tools to verify that your call is not failing due to CORS. Installing CORS extension in chrome and enabling CORS can help. Alternatively, if you have to run the application on localhost only, then add OPTIONS in your PHP application.

answered Mar 25 '18 at 16:27

Vivek Khurana

231
1
5
12

I don't think its a CORS issue, as the result is `404` and not something else. – Nir Tzezana Mar 26 '18 at 06:55
Oddly enough - this was the problem. Had to debug using a standard AJAX request with JS to get the `cross origin` error in the console. – Nir Tzezana Mar 26 '18 at 11:56

Fetching API data on localhost with VueJS

2 Answers2