Laravel Delete方法与Vue.js集成失效，控制台报JSON解析错误

这个SyntaxError: JSON.parse: unexpected character错误几乎都是因为前端尝试解析非JSON格式的响应内容导致的，结合你用Laravel的场景，咱们一步步排查：

1. 先检查Laravel后端的删除逻辑 #

路由是否正确使用DELETE方法 #

Laravel的RESTful路由中，删除操作必须用DELETE请求，确保你的路由定义是这样的：

// routes/web.php 或者 routes/api.php
Route::delete('/articles/{article}', [ArticleController::class, 'destroy']);

如果误写成了GET或者POST，可能会导致响应不符合预期。

控制器destroy方法是否返回合法JSON #

很多时候问题出在这里：控制器方法没有返回JSON响应，而是返回了HTML视图、重定向或者纯文本。比如正确的写法应该是：

public function destroy(Article $article)
{
    $article->delete();
    // 返回标准JSON响应
    return response()->json([
        'message' => '文章删除成功'
    ], 200);
}

⚠️ 注意：如果你的控制器里有return back();或者返回视图的代码，前端拿到的是HTML内容，自然会解析JSON失败。另外，如果触发了模型绑定的404错误，Laravel默认会返回HTML的404页面，你可以自定义成JSON响应：

// 在app/Exceptions/Handler.php里修改（Laravel 8+）
use Illuminate\Database\Eloquent\ModelNotFoundException;

public function register()
{
    $this->renderable(function (ModelNotFoundException $e, $request) {
        if ($request->wantsJson()) {
            return response()->json(['message' => '资源不存在'], 404);
        }
    });
}

2. 检查前端Vue的删除请求 #

确保携带CSRF令牌 #

Laravel要求POST/PUT/DELETE请求携带CSRF令牌，否则会被拒绝。在你的Vue项目里，先确保页面头部有meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在axios的全局配置里设置令牌：

// 比如在main.js或者你的请求封装文件里
import axios from 'axios';

const token = document.head.querySelector('meta[name="csrf-token"]').content;
axios.defaults.headers.common['X-CSRF-TOKEN'] = token;
axios.defaults.headers.common['Accept'] = 'application/json'; // 明确告诉后端要JSON响应

检查deleteArticle方法的写法 #

确保你的删除请求没有错误，比如：

methods: {
    async deleteArticle(id) {
        try {
            // 发送DELETE请求到正确的路由
            await axios.delete(`/articles/${id}`);
            // 删除后更新本地articles列表
            this.articles = this.articles.filter(article => article.id !== id);
        } catch (error) {
            console.error('删除失败:', error.response?.data || error.message);
        }
    }
}

如果后端返回的不是JSON，axios默认会尝试解析成JSON，就会触发那个错误。你可以在catch里打印error.response.data看看实际返回的内容是什么，帮助排查。

3. 用浏览器开发者工具排查响应内容 #

打开浏览器的「开发者工具」→「网络」标签，找到删除操作的请求，查看「响应」标签页的内容：

• 如果返回的是HTML页面（比如403、404页面），说明后端路由或权限有问题
• 如果返回的是纯文本（比如"Deleted"），说明后端没返回JSON
• 如果返回的是空内容，可能是控制器方法没有任何返回值

把这些内容对应到上面的步骤修复，应该就能解决这个JSON.parse错误了。

内容的提问来源于stack exchange，提问作者Sidney Sousa