NextJS: Access has been blocked by CORS policy

> CORS is almost as much of a nuisance as GDPR popups
Cover Image for NextJS: Access has been blocked by CORS policy

You finally managed to get your Next.js-based JSS application loading in the Experience Editor, but then you start noticing intermittent errors and a crowded browser console error log. Let's address some of those issues.

Errors

Here are some of the errors you might see:


_1
Access to resource at 'http://localhost:3000/_next/webpack-hmr' from origin 'https://sitecore102u0.sc' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


_1
sitecore102u0.sc/:1 Access to fetch at 'http://localhost:3000/_next/static/development/_devMiddlewareManifest.json' from origin 'https://sitecore102u0.sc' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.


_1
page-loader.js?e87a:46 GET http://localhost:3000/_next/static/development/_devMiddlewareManifest.json net::ERR_FAILED 200

The Fix

Add this to your next.config.js file above or below async rewrites():


_11
async headers() {
_11
return [
_11
{
_11
source: '/_next/:path*',
_11
headers: [
_11
{ key: 'Access-Control-Allow-Origin', value: process.env.SITECORE_API_HOST || 'https://sitecore102u0.sc' },
_11
{ key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS' },
_11
],
_11
},
_11
];
_11
},

This should resolve most of your errors.

You may still see this one:


_1
Warning: Prop `phkey` did not match.

According to Sitecore, it doesn't affect content editing and it can be ignored. Sitecore says this error affects XP 10.1, but I am also seeing it in 10.2.

I'm also seeing this one, but no fix yet... I reached out to Sitecore support and they said that the related bug 463325 is still open as of 23 Nov, 2022.


_1
GET http://localhost:3000/_next/webpack-hmr 404 (Not Found)

Keep on BUIDLing,

MG


More Stories

Cover Image for NextJS: Unable to Verify the First Certificate

NextJS: Unable to Verify the First Certificate

> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Cover Image for Early Returns in React Components

Early Returns in React Components

> When and how should you return early in a React component?

Cover Image for Super Fast Project Builds with Visual Studio Publish

Super Fast Project Builds with Visual Studio Publish

> For when solution builds take too long

Cover Image for How to Run Old Versions of Solr in a Docker Container

How to Run Old Versions of Solr in a Docker Container

> Please don't make me install another version of Solr on my local...

Cover Image for NextJS/JSS Edit Frames Before JSS v21.1.0

NextJS/JSS Edit Frames Before JSS v21.1.0

> It is possible. We have the technology.

Cover Image for Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

> It's probably time to overhaul your processes

Cover Image for Script: Boost SIF Certificate Expiry Days

Script: Boost SIF Certificate Expiry Days

> One simple script that definitely won't delete your system32 folder

Cover Image for Add TypeScript Type Checks to RouteData fields

Add TypeScript Type Checks to RouteData fields

> Inspired by error: Conversion of type may be a mistake because neither type sufficiently overlaps with the other.

Cover Image for JSS + TypeScript Sitecore Project Tips

JSS + TypeScript Sitecore Project Tips

> New tech, new challenges

Cover Image for SPE Script Performance & Troubleshooting

SPE Script Performance & Troubleshooting

> Script never ends or runs too slow? Get in here.

Cover Image for JSS: Reducing Bloat in Multilist Field Serialization

JSS: Reducing Bloat in Multilist Field Serialization

> Because: performance, security, and error-avoidance

Cover Image for On Mentorship and Community Contributions

On Mentorship and Community Contributions

> Reflections and what I learned as an MVP mentor

Cover Image for Ideas For Docker up.ps1 Scripts

Ideas For Docker up.ps1 Scripts

> Because Docker can be brittle

Cover Image for Year in Review: 2022

Year in Review: 2022

> Full steam ahead

Cover Image for Don't Ignore the HttpRequestValidationException

Don't Ignore the HttpRequestValidationException

> Doing so could be... potentially dangerous

Cover Image for On Sitecore Stack Exchange (SSE)

On Sitecore Stack Exchange (SSE)

> What I've learned, what I see, what I want to see

Cover Image for Symposium 2022 Reflections

Symposium 2022 Reflections

> Sitecore is making big changes

Cover Image for Azure PaaS Cache Optimization

Azure PaaS Cache Optimization

> App Services benefit greatly from proper configuration

Cover Image for NextJS: Short URL for Viewing Layout Service Response

NextJS: Short URL for Viewing Layout Service Response

> Because the default URL is 2long4me

Cover Image for Tips for New Sitecore Developers

Tips for New Sitecore Developers

> Because learning Sitecore can be hard

Cover Image for Hello World

Hello World

> Welcome to the show

Cover Image for Content Editor Search Bar Not Working

Content Editor Search Bar Not Working

> Sometimes it works, sometimes not

Cover Image for Sitecore Symposium 2022

Sitecore Symposium 2022

> What I'm Watching 👀

Cover Image for Tips for Forms Implementations

Tips for Forms Implementations

> And other pro tips