fix: send REST writes as POST with a method override

src/js/hooks/useRestAPI.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import axios from 'axios'
 import { createContextHook } from '../utils/bootstrap'
-import { REST_API_AXIOS_CONFIG } from '../utils/restAPI'
+import { REST_API_AXIOS_CONFIG, applyMethodOverride } from '../utils/restAPI'
 import type { PropsWithChildren } from 'react'
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 
@@ -58,7 +58,11 @@ const buildRestAPI = (axiosInstance: AxiosInstance): RestAPI => ({
 const [Context, useRestAPI] = createContextHook<RestAPIContext>('useRestAPI')
 
 export const WithRestAPIContext: React.FC<PropsWithChildren> = ({ children }) => {
-	const axiosInstance = useMemo(() => axios.create(REST_API_AXIOS_CONFIG), [])
+	const axiosInstance = useMemo(() => {
+		const instance = axios.create(REST_API_AXIOS_CONFIG)
+		instance.interceptors.request.use(applyMethodOverride)
+		return instance
+	}, [])
 
 	const api = useMemo(() => buildRestAPI(axiosInstance), [axiosInstance])
 	const value: RestAPIContext = { api, axiosInstance }

src/js/utils/restAPI.ts

@@ -1,5 +1,5 @@
 import { trimTrailingChar } from './text'
-import type { AxiosRequestConfig } from 'axios'
+import type { AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios'
 
 const normalizeUrl = (url: string | undefined) =>
 	trimTrailingChar(url ?? '', '/')
@@ -15,6 +15,32 @@ export const REST_BASES = {
 	}
 }
 
+/** Verbs that hosts and firewalls commonly reject outright. */
+const OVERRIDDEN_METHODS = ['delete', 'put', 'patch']
+
+/**
+ * Send write requests as POST, naming the intended verb in a header.
+ *
+ * Plenty of hosts allow only GET and POST, so a DELETE never reaches
+ * WordPress: the request is rejected upstream, and the browser reports a 403 —
+ * or a severed connection — that no amount of correct authentication can fix.
+ * The REST server reads `X-HTTP-Method-Override` on a POST and dispatches the
+ * route exactly as it would have, so this changes nothing WordPress sees while
+ * letting the request through.
+ */
+export const applyMethodOverride = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
+	const method = config.method?.toLowerCase()
+
+	if (!method || !OVERRIDDEN_METHODS.includes(method)) {
+		return config
+	}
+
+	config.headers.set('X-HTTP-Method-Override', method.toUpperCase())
+	config.method = 'post'
+
+	return config
+}
+
 export const REST_API_AXIOS_CONFIG: AxiosRequestConfig = {
 	headers: {
 		'X-WP-Nonce': window.CODE_SNIPPETS?.restAPI.nonce,