Issue #2929Opened July 29, 2020by tranle130 reactions

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)

Zero-ZhengJuly 30, 20200 reactions

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.

tranle13July 30, 20200 reactions

@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?

artfAugust 25, 20200 reactions

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.

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.