react-email-editor
react-email-editor copied to clipboard
CORS and 502 Bad Gateway Errors When Fetching from https://api.events.unlayer.com/usage
While integrating the react-email-editor component into my React application, I observed errors in the console related to CORS and a 502 Bad Gateway. Notably, I'm using only the basic functionalities of the editor and not making any explicit fetch requests to the problematic URL.
Error: Access to fetch at 'https://api.events.unlayer.com/usage' from origin 'https://editor.unlayer.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
502 Bad Gateway Error: POST https://api.events.unlayer.com/usage net::ERR_FAILED 502 (Bad Gateway)
Steps to reproduce:
- Integrate react-email-editor into a React component as shown below.
- Load the component in a browser.
- Observe the console for the aforementioned errors. Expected behavior: The react-email-editor should be able to function without any CORS or 502 errors, especially when using basic functionalities.
Code Sample:
import React, { useRef } from 'react';
import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';
const EmailEditorSample = () => {
const emailEditorRef = useRef<EditorRef>(null);
const exportHtml = () => {
const unlayer = emailEditorRef.current?.editor;
unlayer?.exportHtml((data) => {
const { design, html } = data;
console.log('exportHtml', html);
});
};
const onReady: EmailEditorProps['onReady'] = (unlayer) => {
// This can be where you load a design or handle other "onReady" tasks
};
return (
<div>
<h4>Email Editor Sample</h4>
<EmailEditor ref={emailEditorRef} onReady={onReady} />
<button onClick={exportHtml}>Export HTML</button>
</div>
);
};
export default EmailEditorSample;
@MarkoPl08 did you solved this error?
I also get this "502" error, but it seems to work anyway. Do you know how to remove this console error?
They fixed it in a patch shortly after my post so i am closing this issue.