Cors trouble with Nuxt and storyblok

I’m new to storyblok as I made my first little app just a few days ago. It was working ok but then I ran quite a few semi random npm updates and suddenly the ‘The same origin policy’ started disallowing my requests to storyblok from localhost in my nuxt app.

Has anyone experienced the same? Or has ideas how to fix things? Some web searches suggested to me that using a nuxt proxy might be the solution but I’m not quite sure how to use something like that yet.

I’m able to make working requests using the client in node so just nuxt is messed up… I already tried to create a fresh new project and copy my pages to it but it didn’t change anything.

Hello Tapio,

you need to add: Content-Security-Policy: frame-ancestors http://app.storyblok.com/ https://app.storyblok.com/;
to the header options. This will allow the editor to load the page correctly.

Due to the changes in the security policy of major browsers those options are applied in a stricter way to mitigate frauds and other abuse of and with webpages.

Sounds easy, thanks. Though I’m not yet sure if you are talking about vue-meta headers or something else. Anyway I’ll try it!

Hello Tapio,

here is a good example that shows where to add it in your configuration:

With best regards
Hannes

That’s a great image! I was able to do a quick fix previously by adding nuxt-helmet as a dependency to my project and including some default values but I guess it’s always better to be more explicit with what I allow. Shouldn’t make it too easy for those XSS-hackers!

1 Like