質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

0回答

1539閲覧

ベーシック認証のかかったwordpressのカスタム投稿のapiを外部サイトのajaxで受け取る方法

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

2クリップ

投稿2020/08/22 09:33

編集2022/01/12 10:55

前提・実現したいこと

ベーシック認証のかかったwordpressのカスタム投稿のapiを外部サイトのajaxで受け取りたい。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://xxx' from origin 'https://xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

試したこと

[ functions.php ] add_action( 'rest_api_init', function() { remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' ); add_filter( 'rest_pre_serve_request', function( $value ) { header( 'Access-Control-Allow-Origin: ' . $origin ); header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' ); header( 'Access-Control-Allow-Credentials: true' ); return $value; }); }, 15 ); --- [ js ] $.ajax({ url: url, username: "username", password: "password", type: 'POST', dataType: 'json', }) .done(function (data) { }).fail(function () {});
[ functions.phpに追加 ] function my_customize_rest_cors() { remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' ); add_filter( 'rest_pre_serve_request', function( $value ) { header( 'Access-Control-Allow-Origin: https://xxx' ); header( 'Access-Control-Allow-Methods: GET' ); header( 'Access-Control-Allow-Credentials: true' ); return $value; } ); } add_action( 'rest_api_init', 'my_customize_rest_cors', 15 ); [ 結果 ] Access to XMLHttpRequest at 'https://xxx/wp-json/wp/v2/xxx' from origin 'https:xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[ admin-ajax.phpに追加 ] header( 'Access-Control-Allow-Origin: https://xxx' ); header( 'Access-Control-Allow-Methods: GET' ); header( 'Access-Control-Allow-Credentials: true' ); [ 結果 ] Access to XMLHttpRequest at 'https://xxx/wp-json/wp/v2/xxx' from origin 'https:xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[ .htaccessに追加 ] Header set Access-Control-Allow-Origin: http://xxx Header set Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE Header set Access-Control-Allow-Credentials: true [ 結果 ] Access to XMLHttpRequest at 'https://xxx/wp-json/wp/v2/xxx' from origin 'https:xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Request URL: https://xxx/wp-json/wp/v2/xxx Request Method: OPTIONS Status Code: 401 Remote Address: xx.xx.xx.xx Referrer Policy: no-referrer-when-downgrade content-length: 2784 content-type: text/html date: Sun, 23 Aug 2020 05:22:28 GMT etag: "ae0-57776badffe36" last-modified: Fri, 05 Oct 2018 08:05:08 GMT server: nginx status: 401 www-authenticate: Basic realm="Member Site" :authority: xx.xx.xx :method: OPTIONS :path: /wp-json/wp/v2/xxx :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 access-control-request-headers: authorization access-control-request-method: POST cache-control: no-cache origin: https://xxx pragma: no-cache referer: https://xxx sec-fetch-dest: empty sec-fetch-mode: cors sec-fetch-site: cross-site user-agent: xxx

function.phpやhttp.php、admin-ajax.php、.htaccessなどにもheader( 'Access-Control-Allow-Origin: ')を追加してみましたがダメでした。
ベーシック認証がかかっているとワイルドカードは使えないという情報も見たのでheader( 'Access-Control-Allow-Origin: https://
***')とアドレスを指定してみましたがうまくいきません。

こちらの記事も試して見ましたができませんでした。

カスタム投稿のapi自体はちゃんと吐き出されています。
corsを回避できる方法はありますでしょうか?

何卒宜しくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ockeghem

2020/08/22 13:42

//header( 'Access-Control-Allow-Origin: ' . $origin ); という行がありますが、これだとエラーメッセージの通り Access-Control-Allow-Origin がないというエラーになります。実際もコメントアウトされているのでしょうか。
退会済みユーザー

退会済みユーザー

2020/08/22 14:46

失礼しました。実際はコメントアウトしていません。 修正しました。
CHERRY

2020/08/22 21:01

> ダメでした。 > うまくいきません。 では、どのような結果を API から受け取っていたのかが判断できませんので、試されたそれぞれのケースで、 ajax から API にリクエストした結果、 API からどのようなレスポンスヘッダ受け取ったか質問に追記していただけないでしょうか? (WordPress で設定した内容が API のレスポンスヘッダに反映されているのかを確認したい)
退会済みユーザー

退会済みユーザー

2020/08/23 05:44

試した物を追記しました。 いろいろ試したのですが、レスポンスはどれも同じ内容でした。 よろしくお願いいたします。
dameo

2020/08/23 21:13

ベーシック認証しないと駄目なだけでは? > Status Code: 401
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問