blocked by cors policy No 'Access-Control-Allow-Origin' header is present on the requested resource

[raghuv9]

hello i'm using grapesjs with vue wrapper i'm unable to load a webpage using urlLoad: of grapesjs im facing cors issue,i'm pretty new to grapesjs please help me out Thanks in advance . here is my code

import grapesjs from 'grapesjs';

import 'grapesjs/dist/css/grapes.min.css'; import 'grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css'; import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';

import gjspresetnewsletter from 'grapesjs-preset-newsletter'; import gjspresetwebpage from 'grapesjs-preset-webpage';

export default {
    data() {
        return {
            editor: null
        }
    },
    methods: {
        change() {
            this.$emit('change', this.editor.getHtml());
        },
    },
      mounted() {
            const LandingPage = {
            components: null,
            style: null,
            };
            this.editor = grapesjs.init({
            container: "#gjs",
            canvas: {
                 styles: [""],
            },
            fromElement: true,
            components:'',
            style: '',
            plugins: [],
            pluginsOpts: {
                "gjs-preset-webpage": {}
            },
             storageManager: {
                type: 'remote',
                stepsBeforeSave: 10,
                urlStore: '',
                urlLoad: 'https://grapesjs.com/docs/modules/Storage.html#setup-the-server',
                params: {}, 
                contentTypeJson: true,
                headers: {
                    'Content-Type': 'application/json'
                },
                 json_encode:{
                     'gjs-components': [],
                      'gjs-style': [],
                 }

                },
            });
            this.editor.load=(res => console.log('Load callback'));
    }
}

[pouyamiralayi]

hi! you need a rule set like this:

"cors": {
    "enabled": true,
    "origin": "http://localhost:3000",

in your server security policy with origin set to what ever address you deploy your grapesjs client, default to localhost in above case.

[pouyamiralayi]

and in your storageManager configuration change the params entry like this:

 params:{
             'Access-Control-Allow-Origin':'http://localhost:3000',
        }

cheers.

[raghuv9]

and in your storageManager configuration change the params entry like this:

 params:{
             'Access-Control-Allow-Origin':'http://localhost:3000',
        }

cheers.

hi still im facing the same issue here is my code i have included all the changes suggested by you please let me know where i'm doing wrong mounted() { const LandingPage = { components: null, style: null, }; this.editor = grapesjs.init({ container: "#gjs", canvas: { styles: [""], }, fromElement: true, components:'', style: '', plugins: [], pluginsOpts: { "gjs-preset-webpage": {} }, "cors":{ "enabled": true, "origin": "http://laravel-vue-spa.test", }, storageManager: { type: 'remote', stepsBeforeSave: 10, urlStore: '', urlLoad: 'https://grapesjs.com/docs/modules/Storage.html#setup-the-server', params:{ 'Access-Control-Allow-Origin':'http://laravel-vue-spa.test', }, contentTypeJson: true, headers: { 'Content-Type': 'application/json' }, json_encode:{ 'gjs-components': [], 'gjs-style': [], } }, }); this.editor.load=(res => console.log('Load callback')); }

[pouyamiralayi]

in your server security policy with origin set to what ever address you deploy your grapesjs client, default to localhost in above case.

notice that cors entry must be placed on your server side, not grapesjs configuration.

[GnanavelSomasundaram]

In default the credentials option enabled (credentials: 'include'). We need to disable. (credentials:'omit')

[dalmasonto]

In default the credentials option enabled (credentials: 'include'). We need to disable. (credentials:'omit')

This works like a charm, was stuck here for two days and I was wondering, I have been working with CORs long enough not to encounter such an error