Laravel前后端传值遇Uncaught SyntaxError错误求解决方案

问题原因 #

Blade模板的{{ }}语法会自动转义HTML特殊字符（比如双引号会被转成"），你后端提前用json_encode生成的JSON字符串，经过转义后在前端变成了包含&等转义字符的内容，导致JS无法正确解析为对象，从而抛出语法错误。

解决方案 #

方案一：使用非转义输出语法{!! !!}

直接修改前端代码，用{!! !!}替代{{ }}，避免Blade转义JSON内容：

const productionData = {!! $chartData !!};
console.log(productionData);

⚠️ 注意：仅当你能确保$chartData是完全安全的JSON（无恶意脚本内容）时使用，因为非转义输出存在XSS风险。

方案二：使用Laravel的@json指令（推荐）

这种方式更安全且简洁，不需要后端提前做json_encode：

1. 修改后端代码，直接传递生成的数组/对象：

public function __invoke(Request $request)
{
    $productions = new \App\Services\ChartServices\ProductionChart;
    
    return view('home', [
        'title' => 'Home',
        'chartData' => $productions->generate() // 直接传原始数据，不提前json_encode
    ]);
}

2. 前端用@json指令输出：

const productionData = @json($chartData);
console.log(productionData);

@json会自动完成JSON编码和正确的字符转义，输出合法的JS对象，同时避免XSS风险。

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