chrome extentionからWordPress APIをfetchで呼ぶとき、Basic認証が上手く通らない

chrome extentionからWordpress APIをfetchで呼ぶとき、Basic認証が上手く通らない

chrome extentionのJavascriptから、Wordpress APIをfetchで呼ぶとき。
正しい認証情報を指定しているにもかかわらず、認証されない。

{"code":"rest_cannot_create","message":"このユーザーとして投稿を編集する権限がありません。","data":{"status":401}}

となる。

この解決策としてよく出ているのが、サーバによってはヘッダー情報を削除してしまうもの。

.htaccessに、以下のような設定を入れると回避できる例がたくさん出ている。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

ただ、これでも認証が通らない。

Postmanを利用して、実行してみると…うまくいく。ブラウザからだとダメ。何が違うのか。

結論として。
Chrome拡張を動かしているブラウザーで、そのWordpressからログオフすれば、問題なく通った。

要は、Cookie認証とBasic認証がかち合っている。

Cookie認証の場合、nonceが必要になるのでちょっと扱いが面倒くさい。ここはBasic認証で実施。fetchの最後にcredentials: 'omit'で解決した。

var wpApiUrl        =   'https://www.xxx.com/wp-json/wp/v2/posts?context=embed&status=draft';
var username        =   'xxxxxxxx';//これはログインユーザー名を入れる
var appPassword     =   "xxxx xxxx xxxx xxxx xxxx xxxx";
const auth = btoa(`${username}:${appPassword}`);
const response = await fetch(wpApiUrl}, {
    method: 'GET',
    headers: {
        'Authorization': `Basic ${auth}`,
    },
    credentials: 'omit'
});