X-HTTP-Method-Override breaks relationship field on AWS CloudFront hosting.

[BarrySaikSoundry]

Link to reproduction

No response

Payload Version

v3.0.0-beta.56

Node Version

20

Next.js Version

15-rc

Describe the Bug

AWS cloudfront removes the X-HTTP-Method-Override header from HTTP requests as a security measure. In PR#6487 #6487 a feature was added for what looks like an edge case of having a large number of items in a relationship field which uses the X-HTTP-Method-Override to tunnel GET requests in POST. This breaks the loading of items and the use of the relationship field on cloudfront hosting, which is also used by AWS amplify.

Reproduction Steps

Create a simple relationship between two collections, deploy your project on AWS Amplify. When you try to select the pick list to input the relationship fields you will see the list of items does not load:

Adapters and Plugins

No response

[owodunni]

I have been struggling with this issue for a couple of days. It took me a while to figure out that the X-Http-Method-Override: GET header gets removed when calling our kubernetes cluster. We still haven't debugged what part of the cluster is removing it.

But to me it seams a bit unnecessary to use it in:

• fields/Relationship
• fields/Relationship
• fields/Upload

[owodunni]

I made a PR addressing this #8017

[mikexavier]

@owodunni, did you manage to get this working? I tried forwarding the X-Http-Method-Override header, but the relationship field still isn't functioning as expected.

I'm wondering if I might have overlooked something, or could there be another reason why relationship fields fail with CloudFront in this setup?

[owodunni]

I'm running my own fork that uses GET requests instead of POST..

[mikexavier]

Did forwarding the X-Http-Method-Override header not work for you either?

[rubyjasmin]

For those looking for a quick and easy workaround I was able to make this work by adding the following to the cloudfront function

if(event.request.headers["x-http-method-override"]) {
  event.request.headers["x-payload-method-override"] = event.request.headers["x-http-method-override"];
  delete event.request.headers["x-http-method-override"];
}

Then I added a next.js middleware that converts the x-payload-method-override back to x-http-method-override

export function middleware(request: NextRequest) {
  if (!request.headers.has("X-Payload-Method-Override")) {
    return NextResponse.next();
  }
  const headers = new Headers(request.headers);
  headers.set("X-HTTP-Method-Override", "GET");
  return NextResponse.next({
    request: { headers },
  });
}

export const config = {
  matcher: "/api/:path*",
};