fix(ui): cloudfront removing X-HTTP-Method-Override header (#12571)

Author: JarrodMFlesch

docs/rest-api/overview.mdx

@@ -738,7 +738,7 @@ Payload supports a method override feature that allows you to send GET requests
 
 ### How to Use
 
-To use this feature, include the `X-HTTP-Method-Override` header set to `GET` in your POST request. The parameters should be sent in the body of the request with the `Content-Type` set to `application/x-www-form-urlencoded`.
+To use this feature, include the `X-Payload-HTTP-Method-Override` header set to `GET` in your POST request. The parameters should be sent in the body of the request with the `Content-Type` set to `application/x-www-form-urlencoded`.
 
 ### Example
 
@@ -753,7 +753,7 @@ const res = await fetch(`${api}/${collectionSlug}`, {
   headers: {
     'Accept-Language': i18n.language,
     'Content-Type': 'application/x-www-form-urlencoded',
-    'X-HTTP-Method-Override': 'GET',
+    'X-Payload-HTTP-Method-Override': 'GET',
   },
   body: qs.stringify({
     depth: 1,

packages/payload/src/utilities/handleEndpoints.ts

@@ -81,7 +81,8 @@ export const handleEndpoints = async ({
   // packages/ui/src/fields/Relationship/index.tsx
   if (
     request.method.toLowerCase() === 'post' &&
-    request.headers.get('X-HTTP-Method-Override') === 'GET'
+    (request.headers.get('X-Payload-HTTP-Method-Override') === 'GET' ||
+      request.headers.get('X-HTTP-Method-Override') === 'GET')
   ) {
     const search = await request.text()
 

packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx

@@ -138,7 +138,7 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug, defaultType, schedulePub
         headers: {
           'Accept-Language': i18n.language,
           'Content-Type': 'application/x-www-form-urlencoded',
-          'X-HTTP-Method-Override': 'GET',
+          'X-Payload-HTTP-Method-Override': 'GET',
         },
       })
       .then((res) => res.json())

packages/ui/src/fields/Relationship/Input.tsx

@@ -282,7 +282,7 @@ export const RelationshipInput: React.FC<RelationshipInputProps> = (props) => {
               headers: {
                 'Accept-Language': i18n.language,
                 'Content-Type': 'application/x-www-form-urlencoded',
-                'X-HTTP-Method-Override': 'GET',
+                'X-Payload-HTTP-Method-Override': 'GET',
               },
               method: 'POST',
             })
@@ -429,7 +429,7 @@ export const RelationshipInput: React.FC<RelationshipInputProps> = (props) => {
             headers: {
               'Accept-Language': i18n.language,
               'Content-Type': 'application/x-www-form-urlencoded',
-              'X-HTTP-Method-Override': 'GET',
+              'X-Payload-HTTP-Method-Override': 'GET',
             },
             method: 'POST',
           })

packages/ui/src/fields/Upload/Input.tsx

@@ -218,7 +218,7 @@ export function UploadInput(props: UploadInputProps) {
         headers: {
           'Accept-Language': i18n.language,
           'Content-Type': 'application/x-www-form-urlencoded',
-          'X-HTTP-Method-Override': 'GET',
+          'X-Payload-HTTP-Method-Override': 'GET',
         },
         method: 'POST',
       })