axios 返回 HTML 响应 (Laravel +VUE)答案

【问题标题】：Axios returns HTML response (Laravel +VUE)axios 返回 HTML 响应 (Laravel +VUE)
【发布时间】：2020-10-09 09:23:13
【问题描述】：

我的api.php 中有两条路线。

Route::get('resume-list/{templateID}', 'BasicController@getAllResumes');
Route::get('resume/single/{id}', 'BasicController@getResume');

第一个工作正常，但第二个路由返回索引页面的html代码。

下面是路由的axios调用：

data() {
    return {
        id: this.$route.params.id,
        data: {}
    };
},
methods: {
    loadData() {
        axios.get("api/resume/single/" + this.id).then(response => {
            console.log(response);
            this.data = response;
        });
    }
},

created() {
    this.loadData();
}

后端功能

public function getResume($id)
{
    return Basic::where('id', $id)->firstOrFail();
}

这个代码的原因是什么？

Bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

【问题讨论】：

你是从 getResume 返回 json 吗？
$response = Basic::findOrFail($id); return response()->json($response); 只需执行此操作并检查
是的，第一条路由也是axios调用的，效果很好。
也许这是一个错字，但你的api调用中的url是api/single/resume/，但laravel路由是resume/single/{id}：一个是single/resume另一个是resume/single
@PawanRai 您能否分享此 HTML 响应的屏幕截图，因为它可能是错误响应？ Akhthar Munir 也要求提供引导代码。我认为截图或代码可以节省很多时间。

标签： laravel vue.js vuejs2 axios single-page-application

【解决方案1】：

尝试手动转换-https://laravel.com/docs/5.1/responses#json-responses

如果不行，问题出在路由器配置上

【讨论】：

应该是评论而不是答案。
我认为路由没有像我一样到达控制器方法 dd($id) 它仍然返回 HTML 代码，而它应该在 devtool 的网络选项卡中返回它。
你的 vuejs 是一个单独的项目还是包含在 laravel 中？ @PawanRai
在 laravel 里面

【解决方案2】：

以这种方式进行设置

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');
} catch (e) {}


window.axios = require('axios');
//window.axios.defaults.baseURL = process.env.APP_URL;
window.axios.defaults.baseURL = 'http://localhost:8000';

window.axios.defaults.headers.common = {
   'X-Requested-With': 'XMLHttpRequest',
   'Content-Type':'application/json',
   'Accept':'application/json'
   };


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Now your axios call will become

loadData() {
    axios.get(`/api/resume/single/${this.$route.params.id}`).then(response => {
        console.log(response);
    });
}

OR

"/api/resume/single/"+this.id

【讨论】：

感谢它现在正在工作。我的配置有什么问题？？
欢迎您，您没有点击正确的 url，这就是为什么，我在您的全局 axios 设置中配置了一个 baseUrl，并且还缺少 application/json 这些东西。