Move X-HTTP-Method-Override out to an extension

fixes #86
bigskysoftware · Jun 10, 2020 · 2305aed · 2305aed
1 parent 86f1334
commit 2305aed
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 109 deletions.
diff --git a/src/ext/method-override.js b/src/ext/method-override.js
@@ -0,0 +1,11 @@
+htmx.defineExtension('method-override', {
+    onEvent: function (name, evt) {
+        if (name === "configRequest.htmx") {
+            var method = evt.detail.verb;
+            if (method !== "get" || method !== "post") {
+                evt.detail.headers['X-HTTP-Method-Override'] = method.toUpperCase();
+                evt.detail.verb = "post";
+            }
+        }
+    }
+});
diff --git a/src/ext/rails-method.js b/src/ext/rails-method.js
diff --git a/src/htmx.js b/src/htmx.js
@@ -1337,9 +1337,6 @@ return (function () {
 
             if (verb !== 'get') {
                 headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
-                if (verb !== 'post') {
-                    headers['X-HTTP-Method-Override'] = verb.toUpperCase();
-                }
             }
 
             // behavior of anchors w/ empty href is to use the current URL
@@ -1356,7 +1353,11 @@ return (function () {
                 path:path
             };
             if(!triggerEvent(elt, 'configRequest.htmx', requestConfig)) return endRequestLock();
+            // copy out in case the object was overwritten
             path = requestConfig.path;
+            verb = requestConfig.verb;
+            headers = requestConfig.headers;
+            filteredParameters = requestConfig.parameters;
 
             var splitPath = path.split("#");
             var pathNoAnchor = splitPath[0];
@@ -1377,7 +1378,7 @@ return (function () {
                 }
                 xhr.open('GET', finalPathForGet, true);
             } else {
-                xhr.open('POST', path, true);
+                xhr.open(verb.toUpperCase(), path, true);
             }
 
             xhr.overrideMimeType("text/html");

diff --git a/test/attributes/hx-delete.js b/test/attributes/hx-delete.js
@@ -8,10 +8,9 @@ describe("hx-delete attribute", function(){
         clearWorkArea();
     });
 
-    it('issues a DELETE request with proper headers', function()
+    it('issues a DELETE request', function()
     {
         this.server.respondWith("DELETE", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
             xhr.respond(200, {}, "Deleted!");
         });
 
@@ -21,10 +20,9 @@ describe("hx-delete attribute", function(){
         btn.innerHTML.should.equal("Deleted!");
     });
 
-    it('issues a DELETE request with proper headers  w/ data-* prefix', function()
+    it('issues a DELETE request w/ data-* prefix', function()
     {
         this.server.respondWith("DELETE", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
             xhr.respond(200, {}, "Deleted!");
         });
 

diff --git a/test/attributes/hx-patch.js b/test/attributes/hx-patch.js
@@ -8,10 +8,9 @@ describe("hx-patch attribute", function(){
         clearWorkArea();
     });
 
-    it('issues a PATCH request with proper headers', function()
+    it('issues a PATCH request', function()
     {
         this.server.respondWith("PATCH", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
             xhr.respond(200, {}, "Patched!");
         });
 
@@ -21,10 +20,9 @@ describe("hx-patch attribute", function(){
         btn.innerHTML.should.equal("Patched!");
     });
 
-    it('issues a PATCH request with proper headers  w/ data-* prefix', function()
+    it('issues a PATCH request w/ data-* prefix', function()
     {
         this.server.respondWith("PATCH", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
             xhr.respond(200, {}, "Patched!");
         });
 

diff --git a/test/attributes/hx-put.js b/test/attributes/hx-put.js
@@ -8,10 +8,9 @@ describe("hx-put attribute", function(){
         clearWorkArea();
     });
 
-    it('issues a PUT request with proper headers', function()
+    it('issues a PUT request', function()
     {
         this.server.respondWith("PUT", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
             xhr.respond(200, {}, "Putted!");
         });
 
@@ -21,10 +20,9 @@ describe("hx-put attribute", function(){
         btn.innerHTML.should.equal("Putted!");
     });
 
-    it('issues a PUT request with proper headers', function()
+    it('issues a PUT request w/ data-* prefix', function()
     {
         this.server.respondWith("PUT", "/test", function(xhr){
-            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
             xhr.respond(200, {}, "Putted!");
         });
 

diff --git a/test/ext/method-override.js b/test/ext/method-override.js
@@ -0,0 +1,53 @@
+describe("method-override extension", function(){
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function()  {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('issues a DELETE request with proper headers', function()
+    {
+        this.server.respondWith("DELETE", "/test", function(xhr){
+            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('DELETE');
+            xhr.method.should.equal("POST")
+            xhr.respond(200, {}, "Deleted!");
+        });
+
+        var btn = make('<button hx-ext="method-override" hx-delete="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Deleted!");
+    });
+
+    it('issues a PATCH request with proper headers', function()
+    {
+        this.server.respondWith("PATCH", "/test", function(xhr){
+            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PATCH');
+            xhr.method.should.equal("POST")
+            xhr.respond(200, {}, "Patched!");
+        });
+
+        var btn = make('<button hx-ext="method-override" hx-patch="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Patched!");
+    });
+
+    it('issues a PUT request with proper headers', function()
+    {
+        this.server.respondWith("PUT", "/test", function(xhr){
+            xhr.requestHeaders['X-HTTP-Method-Override'].should.equal('PUT');
+            xhr.method.should.equal("POST")
+            xhr.respond(200, {}, "Putted!");
+        });
+
+        var btn = make('<button hx-ext="method-override" hx-put="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Putted!");
+    });
+
+})
diff --git a/test/ext/rails-method.js b/test/ext/rails-method.js
diff --git a/test/index.html b/test/index.html
@@ -83,8 +83,8 @@ <h2>Mocha Test Suite</h2>
 <script src="attributes/hx-ws.js"></script>
 
 <!-- extension tests -->
-<script src="../src/ext/rails-method.js"></script>
-<script src="ext/rails-method.js"></script>
+<script src="../src/ext/method-override.js"></script>
+<script src="ext/method-override.js"></script>
 
 <script src="../src/ext/debug.js"></script>
 <script src="ext/debug.js"></script>

diff --git a/www/extensions.md b/www/extensions.md
@@ -33,6 +33,7 @@ The following extensions that are tested and distributed with htmx:
 | Extension | Description
 |-----------|-------------
 | [`json-enc`](/extensions/json-enc) | use JSON encoding in the body of requests, rather than the default `x-www-form-urlencoded`
+| [`method-override`](/extensions/method-override) | use the `X-HTTP-Method-Override` header for non-`GET` and `POST` requests
 | [`morphdom-swap`](/extensions/morphdom-swap) | an extension for using the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
 | [`client-side-templates`](/extensions/client-side-templates) | support for client side template processing of JSON responses
 | [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx

diff --git a/www/extensions/method-override.md b/www/extensions/method-override.md
@@ -0,0 +1,24 @@
+---
+layout: layout.njk
+title: </> htmx - high power tools for html
+---
+
+## The `method-override` Extension
+
+This extension makes non-`GET` and `POST` requests use a `POST` with the `X-HTTP-Method-Override` header set to the
+actual HTTP method.  This is necessary when dealing with some firewall or proxy situations.
+
+#### Usage
+
+```html
+<body hx-ext="method-override">
+   <button hx-put="/update">
+     This request will be made as a POST w/ the X-HTTP-Method-Override Header Set
+</button>
+</body>
+```
+
+#### Source
+
+<https://unpkg.com/htmx.org/dist/ext/method-override.js>
+
diff --git a/www/extensions/rails-method.md b/www/extensions/rails-method.md