Issue #2262Opened September 10, 2019by raghuv90 reactions

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

Question

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

Answers (3)

pouyamiralayiSeptember 10, 20190 reactions

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.

pouyamiralayiSeptember 10, 20190 reactions

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

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

cheers.

raghuv9September 10, 20190 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.