Laravel中POST请求JS调用出现CSRF Token未定义错误求助

问题场景 #

控制器方法：

public function search(Request $request)
{
    return "Hello";
}

路由配置：

Route::post('/items/search', [ItemController::class, 'search'])->name('items.search');

JavaScript代码：

try {
    fetch('localhost:8000/items/search', {
        headers: {
            "X-CSRF-TOKEN": {{ csrf_token() }}
        },
        method: 'POST',
        body: "TEST"
    })
    .then(response => response.text())
    .then(data => alert(data));
} catch (error) {
     alert(error);
     alert('Failed to search items.');
}

执行JS代码时弹出错误：

ReferenceError: OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65 is not defined

其中OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65是CSRF令牌。

错误原因 #

Blade模板引擎解析{{ csrf_token() }}后，会直接输出无引号包裹的令牌字符串，导致JS将其识别为变量名而非字符串。由于该变量从未定义，因此触发ReferenceError。

解析后的对应JS代码会变成：

"X-CSRF-TOKEN": OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65

修复方案 #

方案1：给令牌添加引号 #

直接在Blade表达式外层包裹双引号，让解析后的令牌成为合法的JS字符串：

headers: {
    "X-CSRF-TOKEN": "{{ csrf_token() }}"
},

方案2：通过meta标签获取令牌（推荐） #

1. 在HTML头部添加meta标签：

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

2. 在JS中读取该meta标签的内容：

headers: {
    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
},

这种方式符合Laravel最佳实践，避免直接在JS中嵌入Blade表达式的耦合问题。

额外补充：fetch请求的URL建议加上完整协议前缀（如http://localhost:8000/items/search），避免协议缺失或相对路径解析异常。

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