Markdown previewer CORS issue

JavaScript
1

I am getting the follwing error on mhy Markdown previewer:

VM614:1 POST https://cdpn.io/boomboom/v2/store?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7InBhaWQiOmZhbHNlLCJ0ZWFtX2lkIjoiWWRFekduIiwidXNlcl9pZCI6IkRKRUFRciIsInVzZXJuYW1lIjoibWFjZW5nciJ9LCJleHAiOjE1NzE4NTQyMjJ9.io_7GzQioZ_O0hBx0qb95Ez0PwKUgGDIHk8RFkFADA4 403
(anonymous) @ VM614:1
(anonymous) @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
c @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
h @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
p @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
h @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
(anonymous) @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
setTimeout (async)
l @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
o @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
_renderProcessedPen @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
(anonymous) @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
Promise.then (async)
u @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
_processAndRenderInternal @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
v @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:14
setTimeout (async)
v @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:14
setTimeout (async)
(anonymous) @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:14
_onPenChange @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:27
o @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:2
(anonymous) @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:15
pub @ everypage-1ce90830741abfe2114d50ca1a244f9c2467b80c51ec9ee8ff712d3d20ea5798.js:15
setItemValue @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:26
_onEditorChange @ index-ad366533802c4e0795a4d4523d45fa838d842e425c5f4910f97b5ea4158de427.js:6
(anonymous) @ codemirror-41b003ba7076ac1285f386080f36114ec6e4c72796832faf66404c01df1eb104.js:2
yt @ codemirror-41b003ba7076ac1285f386080f36114ec6e4c72796832faf66404c01df1eb104.js:2
bt @ codemirror-41b003ba7076ac1285f386080f36114ec6e4c72796832faf66404c01df1eb104.js:2
ur @ codemirror-41b003ba7076ac1285f386080f36114ec6e4c72796832faf66404c01df1eb104.js:3
(anonymous) @ codemirror-41b003ba7076ac1285f386080f36114ec6e4c72796832faf66404c01df1eb104.js:3
bGGgrjN:1 Access to XMLHttpRequest at 'https://cdpn.io/boomboom/v2/store?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7InBhaWQiOmZhbHNlLCJ0ZWFtX2lkIjoiWWRFekduIiwidXNlcl9pZCI6IkRKRUFRciIsInVzZXJuYW1lIjoibWFjZW5nciJ9LCJleHAiOjE1NzE4NTQyMjJ9.io_7GzQioZ_O0hBx0qb95Ez0PwKUgGDIHk8RFkFADA4' from origin 'https://codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It happens when I put this line in ComponentDidUpdate:

 componentDidUpdate() {
    console.log('New state');
    let markedText = marked(this.props.output);
    document.getElementById('preview').innerHTML = markedText;
  }

My pen is at https://codepen.io/macengr/pen/bGGgrjN

Thanks!

2

i found a few links that might help u with the issue

3

Thanks, but the issue is that I am not making the request from my code (there is no call to XMLHttpRequest in my file). So I can’t change the address that’s being called, or modify the way it’s being called.

4

I’m not seeing that, what browser are you using?

5

I’m using Chrome, and it shows up in the devtools

6

Weird. Maybe try logging out and clearing your cache.

1 Like
7

That did the trick! Thanks!