在Wordpress上具有授权标头（CORS）的HTTP发布

Question

I can't achieve to POST something using Authorization: Bearer -token- and I hardly suspect my server configuration. I am using MAMP Pro, in a wordpress based server. That server delivers an API (this is not the Rest API wordpress plugin). This API works fine when i'm using Postman.

My typical use case is :

1. Post from https://front-end.com/login.html to https://back-end.com/api/users/auth in POST with username/pwd as parameters.
2. Returns me a JWT token called myToken
3. Post from https://front-end.com/index.html to https://back-end.com/api/alert in POST with input1/input2 as parameters and Authorization: Bearer <myToken> as Header.

JS Code for step 1

const API_ROOT_URL = "https://back-end.com";
const API_AUTH = "api/users/auth";
const API_ALERT = "api/alert";
const METHOD_POST = "POST";

return new Promise((resolve: any, reject: any) => {
let request = new XMLHttpRequest();
            request.open(METHOD_POST, API_ROOT_URL+"/"+API_AUTH);
           // request.setRequestHeader('Content-Type', 'multipart/form-data');
            request.onload = () => resolve(request.response);
            request.onerror = () => reject(request.response);
            request.send(formData);

JS Code for step 3 :

        return new Promise((resolve: any, reject: any) => {
        let request = new XMLHttpRequest();
        request.open(METHOD_POST, API_ROOT_URL+"/"+API_ALERT);
        request.setRequestHeader('Authorization', "Bearer  "+ AnotherClass.getJwtToken());
      //  request.setRequestHeader('Content-Type', 'multipart/form-data');
        request.onload = () => resolve(request.status);
        request.onerror = () => reject(request.status);
        request.send(formData);
    });

The step 1 works fine. JWT token is retrieved using Postman OR my regular Webapp on front-end.com.

The step 3 works fine with Postman, where my Form is successfully posted and I received a 200. But when I use it with my WebApp,I cannot pass the preflight OPTION request.

Note that I also mocked my API using mockable.io (which is https too) and the request successfully pass ; this is not important in our case but this is why I suspect a wrong server configuration.

Tested :

A. Rewrite rule in MAMP Virtual Host :

RewriteEngine on RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

B. Rewrite rule in the htaccess of my wordpress server (same as above, pushed after existing rewrite rules)

C. For test purpose, removed "Authorization: Bearer" to see if request goes to POST (and it does with no surprise)

D. Tried to add SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1 in .htaccess, with and without the previous rewrite rules.

E. As stated in JS code above, tried to hard-set Contet-Type to multipart, with no improvement.

F. Tried to add / in the endpoint API_ALERT just in case wordpress do silly redirection (experienced that before)

I have now absolutely no idea where to look for. I suspect either an Apache configuration blocking Authorization, or Wordpress messing with Cors or Authorization.

Answer 1

If this had a subtitle, it would be "Story of JWT Authorization on a custom Wordpress using no plugins, with a JavaScript WebApp on another domain using Service Workers and XHR"

Auto-congratulating myself, but special thanks to https://www.html5rocks.com/en/tutorials/cors/ , providing crystal-clear informations about how servers and scripts interact.

Using Wordpress, my solution was (I changed nothing from my JS code):

1. Add the following Before the #BEGIN WordPress statement

    <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1] </IfModule> 

2. In your Route service, savagely bypass "addRoute" method by using :

    $this->routes[] = [ltrim("/api/alert", '/'), [$myApiController, 'alertAction']]; 

3. In the API Controller $myApiControler create the entry point function alertAction

    public function alertAction() { $request = Request::getInstance(); if(!$request->isXmlHttpRequest()) { switch($request->getMethod()) { case Request::METHOD_OPTIONS: $this->handleOptionsMethod(); break; case Request::METHOD_POST: $this->handlePostMethod($request); break; default: $response = new Result(404); status_header($result->getCode()); echo $response; die(); break; } } 

   }

4. In the handleOptionsMethod() method create the appropriate Options response, with the required headers

    private function handleOptionsMethod() { $response = new Result(200); status_header($response->getCode()); header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Allow-Headers: Authorization'); echo $response; die(); } 

5. In the handlePostMethod() method, do what you have to.

    private function handlePostMethod($request) { $requestData = $request->request->all(); $authorization = $request->headers->get('Authorization'); $jwt = str_replace('Bearer ', '', $authorization); $decoded = JWT::decode($jwt, JWT_SECRET_KEY, array('HS256')); $userId = (int) $decoded->data->userId; ... $response = new Result(200) status_header($result->getCode()); echo $response; die(); } 

Yet, basically : - Allow your server to read additionnal HTTP informations - Allow your wordpress instance to do specific stuff on OPTIONS request - Create the response headers your script needs to allow the preflight request (allow "Authorization" custom header in my case) - Create the regular request handler (your post, or get).

Hope this will help some of you.

Last part of my problem is, now that the POST request successfully triggers, the Service Worker does NOT work, and therefore I can't access the "response" and handle it properly. But I already made a big step forward and wanted to share it with some of you.