Load HTML file from remote

[mrajeshkrossark]

I hosted my html content in cloud. Then trying to load the html content in the editor I found the error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

My code: const editor = () => grapesjs.init({ container: '#editor-portal', canvas: { styles: ['https://codepen.io/mrajeshkrossark/pen/mGLyJX.css'] }, plugins: ['gjs-preset-webpage'], pluginsOpts: { "gjs-components":[] }, storageManager: { type: 'remote', storeHtml: true, storeCss: true, urlStore: "http://www.lightblue.byethost4.com", urlLoad: "http://www.lightblue.byethost4.com", params: {}, } });

Note: I wrapped the grapesjs editor into react application.

[cjpollard]

You're pointing your storage manager to a website. You need endpoints that can handle the requests. https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage

[mrajeshkrossark]

You're pointing your storage manager to a website. You need endpoints that can handle the requests. https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage

I tried with below endpoints that also shows error storageManager: { type: 'remote', storeHtml: true, storeCss: true, contentTypeHTML: true, urlStore: "http://www.lightblue.byethost4.com/index.html", urlLoad: "http://www.lightblue.byethost4.com/index.html", params: {}, }

[JulyanoF]

You're pointing your storage manager to a website. You need endpoints that can handle the requests. https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage

I tried with below endpoints that also shows error storageManager: { type: 'remote', storeHtml: true, storeCss: true, contentTypeHTML: true, urlStore: "http://www.lightblue.byethost4.com/index.html", urlLoad: "http://www.lightblue.byethost4.com/index.html", params: {}, }

I use a json content and it is working:

storageManager: {
        autosave: true,
        setStepsBeforeSave: 2,
        type: 'remote',
        urlStore: 'comunicados/store' + id,
        urlLoad: 'comunicados/load' + id,,
        contentTypeJson: true,
    },

[artf]

@mrajeshkrossark contentTypeHTML?!? I don't think guessing options will help you here.

I tried with below endpoints that also shows error storageManager: { type: 'remote', storeHtml: true, storeCss: true, contentTypeHTML: true, urlStore: "http://www.lightblue.byethost4.com/index.html", urlLoad: "http://www.lightblue.byethost4.com/index.html", params: {}, }

mmm nope, it doesn't work like this, those should be enpoints, usually a server-side script result, not simple HTML files.

[mrajeshkrossark]

I did with endpoint this time but no luck. @artf Bro, Note am using react component I will share the complete code of mine with this comment. Plz share what are mistakes which I did in my code...

import React from 'react';
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';
import 'grapesjs/dist/grapes.min.js';
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js';
import Template_Client from '../TemplateCollection/Template_Client';

const editor = () => grapesjs.init({
        container: '#editor-portal',
    canvas: {
           },
    allowScript: 1,
    plugins: ['gjs-preset-webpage'],
     storageManager: {
        type: 'remote',
        autoload: 1,
        urlLoad: "http://loyal-throne-215410.appspot.com/renderstaticwebsite",
         params: {},
    }
});

class TemplateEditor extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        editor();
    }

    componentWillUnmount() {
        editor('destroy');
    }
    render() {
        return (
        <React.Fragment>
            <div id = "editor-portal" > {
                <Template_Client></Template_Client>
            </div>  
        </React.Fragment>
        );
    }
}

export default TemplateEditor;

[artf]

@mrajeshkrossark the problem is still your endpoint, it's an HTML document, you have to return an application/json like this:

{
    "gjs-components": ...,
    "gjs-style": ...
}

Read this please: https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

[mrajeshkrossark]

@mrajeshkrossark the problem is still your endpoint, it's an HTML document, you have to return an application/json like this:

{
  "gjs-components": ...,
  "gjs-style": ...
}

Read this please: https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

It's working @artf. Thanks for the reply and helped me to correct this issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.