0

EC-CUBE 4.2.1
導入プラグイン: EC-CUBE Web API プラグイン
PHP 7.4.33

やりたいこと

fetchAPIを使用して、EC-CUBEの商品情報を取得したい。

現状

  • アクセストークンの取得(開発環境でfetchAPIのデータ取得の際に認証が必要だったため、EC-CUBEのOAuth管理からクライアントAPIを登録し対応)
  • CORS回避のためプロキシサーバーを設定。
  • その後Postmanでデータの取得は確認済み。

プロキシサーバーのコード

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors'); // CORSパッケージのインポート

const app = express();

// CORSミドルウェアの使用。すべてのオリジンからのアクセスを許可する設定です。
app.use(cors());

// プロキシ設定
app.use('/api', createProxyMiddleware({
 target: 'EC-CUBE APIのホスト名',
 changeOrigin: true,
 logLevel: 'debug', // デバッグ情報を出力
 pathRewrite: {'^/api': ''},
}));

const PORT = 3000;
app.listen(PORT, () => {
 console.log(`Proxy server is running on http://localhost:${PORT}`);
});

フロントのスクリプト

fetch('http://localhost:3000/api', {
 method: 'POST',
 headers: {
  'Content-Type': 'application/json',
  'Authorization': `Bearer アクセストークン`
 },

 body: JSON.stringify({
  query: `{
   products(limit: 5, page: 1) {
    edges {
     node {
      id
      name
      ProductClasses {
       price02
      }
     }
    }
   }
  }`
 })
})
.then(response => {
 if (!response.ok) {
  throw new Error('Network response was not ok');
 }
 return response.json(); // ここでレスポンスをJSONとして解析
})
.then(data => {
 console.log('API call was successful:', data); // ここでAPIからのデータをコンソールに出力
})
.catch(error => {
 console.error('Error during the API call:', error);
});

問題点

プロキシサーバー(Node.js + http-proxy-middlewareを使用)を経由してEC-CUBEにPOSTリクエストを送信すると、「POST http://localhost:3000/api 405 (Method Not Allowed)」のエラーが発生します。
endpointやheaderのContent-Type、Authorizationなどは何度も確認しており間違いはないかと思います。

質問

上記で記載しているほぼ全ての単語をここ数日で初めて聞いてなんとなく理解した程度のリテラシーのため、ここで完全に行き詰ってしまっておりお助けいただきたいです。

このあたりでよくある原因などあれば教えていただけないでしょうか?

お手数おかけいたしますが、上記にお詳しい方お答えいただけますと幸いです。
情報の不足などございましたらお教えください。
よろしくお願いいたします。

1 件の回答 1

0

405 Method Not Allowed と自分の経験からの想像ですが・・・(なので、ハズレかもしれませんが)

バックエンドが CORS 非対応なので、以下のような構成にして CORS 問題を回避しようとしていると理解しています。

ブラウザ ⇔ プロキシ ⇔ バックエンド (CORS 非対応)

ところがそれがうまく構成できてなくて、

ブラウザ ⇔ バックエンド (CORS 非対応)

となってしまっているということはありませんか?

もし、そうなっているとすると、method: 'POST''Content-Type': 'application/json' なのでブラウザからはプリフライトリクエストが出ます。(もちろん、上の「ブラウザ」と「バックエンド」のドメインが異なる場合)

その場合、HTTP メソッドは OPTIONS になりますが、バックエンドで OPTIONS が許可されてないから 405 Method Not Allowed となったのではないでしょうか?

以下の画像はバックエンドが CORS 非対応の ASP.NET Core Web API に、ブラウザから fetch API を使ってmethod: 'POST''Content-Type': 'application/json' で要求を出した時のものです。

画像の説明をここに入力

要求側の CORS 対応はブラウザの仕事で、プリフライトが必要か否かもブラウザが判断して適切なメソッドで適切な要求ヘッダを送信してくれます。上の画像の赤枠がそれです。

バックエンドの ASP.NET Core Web API で、CORS を有効にしないと OPTIONS メソッドでは 405 Method Not Allowed となります。上の画像の青枠がそれです。

上の画像のように、Fiddler などのツールを使って要求・応答をキャプチャして調べてみてはいかがですか?

そういうことができない場合はリクエストオプションに mode:"no-cors" に設定して試してみると、もし上に書いたことが問題の原因であれば、違う結果になるので試してみてはいかがですか? mode:"no-cors" に設定するとどうなるか、詳しくは以下の記事を見てください。

fetch API の mode:"no-cors"
http://surferonwww.info/BlogEngine/post/2023/11/28/mode-no-cprs-in-fetch-api.aspx

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。