GrapesJS存储数据异常：请求URL不符配置问题求助

问题排查与修复步骤 #

1. 禁用预设插件的默认存储配置 #

grapesjs-preset-webpage 预设自带了一套storageManager配置，会覆盖你自定义的设置。初始化编辑器时，需明确禁用预设的存储功能：

const editor = grapesjs.init({
    container: '#editor',
    plugins: [plugin, presetplugin],
    pluginsOpts: {
        [presetplugin]: {
            storageManager: false // 禁用预设的存储配置
        }
    },
    autosave: false,
    storageManager: {
        type: 'remote',
        urlLoad: 'http://127.0.0.1:8003/api/pages/store',
        urlStore:'http://127.0.0.1:8003/api/pages/store',
        contentTypeJson: true,
        storeComponents: true,
        storeStyles: true,
        storeHtml: true,
        storeCss: true,
        stepsBeforeSave: 1,
        headers: {
            'Content-Type': 'application/json'
        },
        id:'my-',
        onLoad: result => result.gjs_data,
        // 统一数据格式，匹配后端接收字段
        onStore: data => ({ gjs_data: data })
    }
});

2. 手动触发保存操作 #

由于你设置了autosave: false，编辑器不会自动保存，需手动调用保存方法。可添加按钮触发：

// Vue中添加保存按钮的点击事件
const saveEditor = () => {
    editorRef.value.store()
        .then(() => console.log('保存成功'))
        .catch(err => console.error('保存失败', err));
};

3. 修正后端数据接收逻辑 #

调整后端字段接收逻辑，匹配前端发送的结构，同时修复返回数据的编码问题：

public function store(Request $request)
{
    Page::find('99972727-ccea-4e48-892e-d63e6e68b884')->update(
        ['gjs_data' => $request->gjs_data] // 接收前端发送的gjs_data字段
    );

    return response()->json(['success' => true]);
}

public function getpage()
{
    $page = Page::orderBy('created_at','asc')->first();
    return response()->json($page->gjs_data); // 直接返回数据，避免双重JSON编码
}

4. 检查跨域配置 #

如果前后端域名不一致，需确保后端配置了CORS（比如Laravel中使用fruitcake/laravel-cors包），允许前端域名发起请求。

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