概要
サーバサイドが得意なエンジニアですが、フロントエンドも少し勉強しようと思ってReactの学習はじめました。
最近勉強してもすぐ忘れます(>_<)
Reactでaxiosを使って外部API(Amazon API Gatewayで作ったMockのAPI)を呼び出した時にCORSエラーが出て色々調べた結果やっとこの設定で動いたというのを自分のために記録しておきます。
表示されたエラー
Access to XMLHttpRequest at 'https://hoge-foo-piyo.amazonaws.com/dev/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Proxyを使えばいいらしい？
色々と調べてhttp-proxy-middlewareをインストールしてproxyを使えば簡単に出来るということは分かりましたが、なかなか表示されない。暑い中イライラ。今年の夏も暑いですね(>_<)
出来たこと
http-proxy-middlewareは問題なくインストール出来た。
でもなんかProxyの設定がうまくいかない。
結論
(1)src配下に、setupProxy.jsを作る。
色々調べるとだいたいこのファイル名ですが、このファイル名でないとどうなるんだろう？あとで確かめてみる。
(2)setupProxy.jsの中身をこれにしたらうまくいきました。
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/dev/users",
createProxyMiddleware({
target: "https://hoge-foo-piyo.amazonaws.com",
changeOrigin: true,
})
);
};
(3)axios側
axios.get("/dev/users")と書くと、
アプリ側からのhttp://localhost:3000/dev/usersというリクエストがhttps://hoge-foo-piyo.amazonaws.com/dev/usersに転送されて外部APIからデータを取得出来ました。