Chrome扩展向Laravel5.5发送Ajax POST请求遇CSRF验证419错误

你遇到的核心问题是Chrome扩展的静态HTML文件无法解析Laravel的Blade模板语法，导致CSRF令牌没有正确获取，进而触发Laravel的CSRF验证拦截（返回419状态码）。

问题根源分析 #

你的popup.html里使用了{{ csrf_token() }}这个Blade语法，但Chrome扩展的HTML是本地静态资源，不会经过Laravel服务器的模板渲染——也就是说，这个占位符不会被替换成真实的CSRF令牌，你的Ajax请求里携带的_token值其实是字符串{{ csrf_token() }}，完全不符合Laravel的验证要求，自然会被VerifyCsrfToken中间件拦截。

解决方案：动态获取有效CSRF令牌 #

下面是具体的修复步骤：

1. 在Laravel后端添加获取CSRF令牌的路由

打开routes/web.php，新增一个返回CSRF令牌的GET路由：

Route::get('/get-csrf-token', function () {
    return response()->json([
        'csrf_token' => csrf_token()
    ]);
});

2. 修改Chrome扩展的JS代码，先拿令牌再发请求

更新popup.js，先请求上述路由拿到有效令牌，再发起POST请求：

let taburl = "";
let csrfToken = "";

// 获取当前标签页的URL和标题
chrome.tabs.query({ active: true, lastFocusedWindow: true }, function(tabs) {
    const tab = tabs[0];
    taburl = tab.url;
    $("#input").val(taburl);
    const truncatedTitle = tab.title.substring(0, 20) + '...';
    $('.title').html(truncatedTitle);
});

// 先从Laravel后端获取有效CSRF令牌
$.get("https://app.test/get-csrf-token", function(response) {
    csrfToken = response.csrf_token;
    // 设置Ajax全局CSRF请求头
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrfToken
        }
    });
});

$(document).ready(function() {
    $("#button").on("click", ajaxCall);
});

function ajaxCall(element) {
    // 阻止表单默认提交行为（避免页面刷新）
    element.preventDefault();
    
    if (!csrfToken) {
        alert("Failed to get CSRF token, please try again.");
        return;
    }

    $.ajax({
        url: "https://app.test/",
        data: {
            "_token": csrfToken,
            "url": taburl
        },
        method: "POST",
        success: function(data) {
            alert("Sent URL = " + taburl);
        },
        error: function(xhr) {
            console.error("Request failed:", xhr.responseText);
        }
    });
}

3. 清理popup.html中无效的Blade语法

把popup.html里的meta标签改成空值（或者直接删除，因为我们会通过JS动态设置CSRF头）：

<!-- 移除无效的Blade占位符 -->
<meta name="csrf-token" content="">

额外注意事项 #

• 跨域配置：如果Laravel应用和Chrome扩展存在跨域问题，需要在Laravel中配置CORS允许扩展的来源。可以使用barryvdh/laravel-cors包快速配置，或者手动在中间件中添加CORS响应头。
• 扩展ID白名单（可选）：如果不想每次请求令牌，可以在Laravel的VerifyCsrfToken中间件中，把Chrome扩展的来源添加到$allowedOrigins数组：

  // App\Http\Middleware\VerifyCsrfToken.php
  protected $allowedOrigins = [
      'chrome-extension://你的扩展ID',
  ];
  

  扩展ID可以在Chrome扩展管理页面找到。

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