Cannot get the data from axios with api - vue js

Question

I have an issue when i get the data with vue js, it returns a HTML not json. I conse the route params it show an id of the post. This is my code in vue:

axios.get("api/posts/" + this.$route.params.id).then(response => {
  console.log(this.$route.params.id);
  console.log(response.data);
});

And this is the response data :

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <link rel="stylesheet" href="http://127.0.0.1:8000/css/app.css">
        <script src="http://127.0.0.1:8000/js/app.js" defer></script>
    </head>
    <body>
        <div id="app">
            <index></index>
        </div>
    </body>
</html>

But in the postman, i access the url "api/posts/1" it show json data {"id": 1,"title": "Schambergerstad Fancy Rooms", "description": "Qui minima tempora ea modi maiores. Quaerat non aut porro vel occaecati. Deleniti quaerat quod veniam. Dolor ducimus facilis molestiae omnis fuga occaecati.", "created_at": "2020-06-04T11:28:25.000000Z","updated_at": "2020-06-04T11:28:25.000000Z" }

But i see in network tab, the request url is "http://127.0.0.1:8000/posts/api/posts/1". Why become to that url? I call it in axios is "api/posts/1" How to fix it?

Request URL: 127.0.0.1:8000/posts/api/posts/1 Request Method: GET Status Code: 200 OK Remote Address: 127.0.0.1:8000 Referrer Policy: no-referrer-when-downgrade — M Muqiit Faturrahman
– M Muqiit Faturrahman, Commented Jun 8, 2020 at 8:57
Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9,id;q=0.8 Connection: keep-alive Host: 127.0.0.1:8000 Referer: 127.0.0.1:8000/posts/1 — M Muqiit Faturrahman
– M Muqiit Faturrahman, Commented Jun 8, 2020 at 8:58

LHJ · Accepted Answer · 2020-06-08 09:15:21Z

2

try adding headers Content-Type json

axios.get("/api/posts/" + this.$route.params.id, {
    headers: {
        'Content-Type': 'application/json'
    }
}).then(response => {
  console.log(this.$route.params.id);
  console.log(response.data);
});

edited Jun 8, 2020 at 9:15

answered Jun 8, 2020 at 8:52

LHJ

6925 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M Muqiit Faturrahman Over a year ago

I try that, but in url request is "127.0.0.1:8000/posts/api/posts/1" not "127.0.0.1:8000/api/posts/1"

user8034901 Over a year ago

Then access axios.get("/api/posts/

LHJ Over a year ago

my bad, i didn't see that as well

M Muqiit Faturrahman · Accepted Answer · 2020-06-08 09:05:58Z

0

Okay sorry it's just typo axios.get("api/posts/" + this.$route.params.id) it's should add "/" before "api/posts/"

axios.get("/api/posts/" + this.$route.params.id)

answered Jun 8, 2020 at 9:05

M Muqiit Faturrahman

1292 silver badges12 bronze badges

Collectives™ on Stack Overflow

Cannot get the data from axios with api - vue js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related