Question

当我使用vue js获取数据时，我遇到了一个问题，它返回的是HTML而不是json。我认为路线参数显示了帖子的ID。这是我在vue中的代码：

axios.get("api/posts/" + this.$route.params.id).then(response => {
  console.log(this.$route.params.id);
  console.log(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>

但是在邮递员中，我访问URL“ api / posts / 1”，它显示json数据 {“ id”：1，“ title”：“ Schambergerstad Fancy Rooms”， “ description”：“ Qui minima tempora ea modi maiores。Quaerat non a 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” }

但是我在网络标签中看到，请求网址为“ http://127.0.0.1:8000/posts/api/posts/1”。为什么要转到该网址？我在axios中将其称为“ api / posts / 1” 如何解决？

Answer 1

尝试添加标题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);
});

Answer 2

抱歉，这只是拼写错误axios.get("api/posts/" + this.$route.params.id)，应该在"/"之前添加"api/posts/"

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

无法使用api从axios获取数据-vue js

2 个答案: