Keep getting CORS when using fake endpoint for remote storage
Question
Hi everyone! I'm using grapesjs with vuejs and I'm struggling with CORS. I created my fake endpoint with beeceptor and I have the code below for editor:
this.editor = grapesjs.init({
container: '#gjs',
height: '500px',
width: '100%',
plugins: [
'gjs-preset-webpage'
],
storageManager: {
id: '',
type: 'remote',
storeComponents: true,
storeStyles: true,
storeHtml: false,
storeCss: false,
contentTypeJson: true,
stepsBeforeSave: 5,
urlStore: 'https://supa-god.free.beeceptor.com',
urlLoad: '',
params: {
'Access-Control-Allow-Origin':'http://localhost:8080'
},
headers: {
'Content-Type': 'application/json'
},
json_encode: {
'gjs-components': [],
'gjs-style': [],
}
},
})
It works just fine if I do normal request like post(url, params).then()... but gives out CORS error when I use this.editor.store(). I noticed that grapesjs includes X-Request-With header in the request and I found that you cannot make cross-domain request with it. Is there any way to make the request go thru with my fake store endpoint?
Answers (3)
Hi:
My solution is:
Grapes JS settings
`storageManager: {
type: 'local',
autosave: true,
stepsBeforeSave: 1,
autoload: true,
}`
Request API to get data and save
`localStorage.setItem ('gjs-html', res.data.html )
localStorage.setItem ('gjs-components', res.data.components )
localStorage.setItem ('gjs-css', res.data.css )
localStorage.setItem ('gjs-styles', res.data.styles )`
After the project is built or published,type is set toremote
At present, it works normally.
@Zero-Zheng thanks for the solution! I have to work with remote so is there any way to make remote work with fake endpoint? x( Or is it impossible?
It's up to the endpoint provider to decide if the cross-request is a valid one, GrapesJS (or any client library) has nothing to do with that. Here you can read more about how CORS works https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Related Questions and Answers
Continue research with similar issue discussions.
Issue #384
Create and Edit Template into Database
This is my code to Create a new template and insert the inline html with style into the database : I am able to insert the template-data in...
Issue #620
Remote Storage
I'm trying to use the remote storage but no success, with the resolved issues I manage to adjust eveything as it best, but editor do not re...
Issue #3071
BUG: update listener triggered on initial load
Hello! I found weird bug with update listener. It's triggered on initial load if html code has <img> tag with class attribute: You can chec...
Issue #2778
BUGS - Cannot read property 'querySelector' of null at r.getBody
Hi I was trying to use grapesjs on visualsource pages. Following is the init function - initEditor: function(){ var self = this; this.edito...
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.