OPTIONS not handled when Origin header is present

[aladinflux]

Bug report

NextJS simply ignores any OPTIONS request that has Origin in the header and won't execute the function.

Describe the bug

After Following the documentation and implementing the middleware to handle cors, it seems seems like it gets triggered ONLY when there's no Origin header in the OPTIONS request.

In other words, put a console.log at the beginning of the function (before cors middleware). Send an OPTIONS request without Origin in the headers, see the log. Now add Origin (any value) and the log doesn't even show up. The function was not executed.

To Reproduce

1. Start with a fresh NextJS app
2. Follow the documentation
3. Use Postman to send an OPTIONS request and see the cors middleware returning the right response
4. Add Origin in the headers (to simluate a browser) and watch as the api function doesn't get called.

Expected behavior

NextJS should allow me to handle CORS requests.

Screenshots

System information

• OS: macOS
• Browser Postman (or any browser)
• Version of Next.js: 9.3.5
• Version of Node.js: 13.8.0

Additional context

I already submitted an issue here #11478 but it was swiftly closed.

[Industrial]

I have the same issue but it's with a rewrite URL, not an API URL. It seems to be something that happens before the rewrites that is causing this.

[Erxhan]

I had the same exact bug and I can add something else, since I added an origin to the cors and then removed it, it continues to handle that like if there's always an origin specified and so triggering the "has been blocked by CORS policy" error.

[Eduardo-rico]

Yes I have the same issue with my API URL, everything was running smoothly but suddenly CORS everywhere

[kawmra]

I found the codes causing this bug.

next.js/packages/next/server/hot-reloader.ts

Lines 57 to 67 in 6cd1c87

	function addCorsSupport(req: IncomingMessage, res: ServerResponse) {
	const isApiRoute = req.url!.match(API_ROUTE)
	// API routes handle their own CORS headers
	if (isApiRoute) {
	return { preflight: false }
	}
	if (!req.headers.origin) {
	return { preflight: false }
	}

This function doesn't consider rewrite rules and simply adds fixed CORS headers.

The problem only occurs on the dev server with rewrite rules that rewrite non-API paths to API paths, so you can workaround the problem by starting the server (next build && next start) instead of starting the dev server (next dev).

[ytrkptl]

Hi, please guide if this is the wrong place to post this and I will post it somewhere else, but I believe the problem I am encountering might be related to this same issue.

My question is How do I configure Next.js to only accept calls from my own frontend only and not from elsewhere? I am able to do this fine in Express applications using the cors package by configuring dynamic origins like in the following snippet, but how to achieve the same result in Next.js? Otherwise, I believe anyone can make calls to my backend.

`var whitelist = ['http://example1.com', 'http://example2.com']

var corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
}
}
`

[seveibar]

I created a reproduction of NextJS rewriting CORS here: https://github.com/hello-seam/nextjs-rewrites-break-cors/tree/main

This is problematic for companies leveraging NextJS for APIs

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.