Laravel POST JavaScript call CSRF is not defined

April 25, 2024

I have the following function:

public function search(Request $request)

{
    return "Hello";
}

Route:

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

JS:

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.');
}

When I execute the JS code I get the following alert error:

ReferenceError: OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65 is not defined

OvEdMjEpBD3OxCZYVO9pxkKZSdZvdjeDiid9gG65 being the CSRF token, could someone point me in the right direction on what I’m doing wrong?

>Solution :

Looks like it is trying to find a variable, i reckon if you wrap it in "" it will work as expected:

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.');
}