blocked by cors policy No 'Access-Control-Allow-Origin' header is present on the requested resource
Question
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)
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.
and in your storageManager configuration change the params entry like this:
params:{
'Access-Control-Allow-Origin':'http://localhost:3000',
}
cheers.
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.
Issue #2261
load local html file into grapesjs
hello i am pretty new to grapejs i want to load a local html file in the assets folder into grapesjs editor ,pls tellme how i can load loca...
Issue #2465
[Question] issue with css and icons
hey @artf i installed grapes js through npm [ "grapesjs": "^0.15.9"] and i'm using vue with grapes js , here is my code -------------------...
Issue #4273
How to trigger the 'Import Template (modal)' on page load
Hello, Please i'm in need of the logic on how to the import template modal on initialization of the page... I'm using the newsletter preset...
Issue #2001
Unable to access the application in LAN network
Hi @artf , Could you please help me here. Unable to access this application in LAN network, could you please help me what needs to done to...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.