why
前回の記事で Next.ts プロジェクトをテンプレで作った。
今回は API を呼べるようにする。
Axios 入れて useEffect で呼ぶだけでは叩けなかった。
6h ほどハマったので、解決策を記事にしておく。
axios のインストール
npm i axios axios を使うことで HTTP リクエストができる。
UseEffect について
初回起動時に API を叩くように。
https://masa-engineer-blog.com/react-hook-useeffect/
第 2 引数がないと初回のみ動く
第 2 引数があると第 2 引数の更新時のみ動く
axios.create で GET リクエストをする
Home で
const axiosInstance = axios.create({ baseURL: "http://localhost:8080", headers: { 'Content-Type': 'application/json', }, }) - ベースの URL
- コンテンツタイプが JSON
ということを指定してインスタンスを作る
const getHeardOn = async () => { console.log("getHeardOn"); await axiosInstance .get(`/heard-on`) .then((response)=>{ setHeardOn(()=> response.data) }) .catch((e) =>{ console.log(`Error: ${e}`); }) } 次にインスタンスを使って
/heard-on に GET リクエストをする。
/heard-one は person-api で作ったエンドポイント。
useEffect で初回ロード時に呼び出す
useEffect(() => { console.log("loaded"); getHeardOn() console.log(heardOn); }) 初回ロード時に getHeardOn を呼び出すようにする。
Access to XMLHttpRequest at 'http://localhost:8080/heard-on' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. localhost 3000 からのリクエストが
CORS によって弾かれた。
Access-Control-Allow-Origin
というヘッダーがリクエストのリソースに存在しない
とエラーが出た。
Access-Control-Allow-Origin をヘッダーに追加して送信に失敗
https://stackoverflow.com/questions/45975135/access-control-origin-header-error-using-axios
この記事を参考にして
const axiosInstance = axios.create({ baseURL: "http://localhost:8080", headers: { 'Content-Type': 'application/json', "Access-Control-Allow-Origin": "*", }, }) Access-Control-Allow-Origin: *
で
アクセスを許可する元：全て
にしたヘッダーを作ってリクエストした。
Access to XMLHttpRequest at 'http://localhost:8080/heard-on' from origin 'http://localhost:3000' 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. kurab さんのにている記事を見つけたが少し違う。
やはり 'Access-Control-Allow-Origin' がついてないと怒られている。
axios インスタンスにつけるだけではダメなようだ。
next config の rewrite でローカルに送っている体にする
next.config.js
/** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/(.*)', destination: 'http://localhost:8080', }, ] }, }; module.exports = nextConfig これで baseURL なしで、
デフォルトの localhost 3000 に送るコードが
到着地の localhost8080 に書き換わって送信される。
index.tsx
const axiosInstance = axios.create({ // baseURL: "http://localhost:8080", headers: { 'Content-Type': 'application/json', }, }) なので baseURL を外した。これで 8080 に送信できる。
実際に person-api と person-web を動かすと
上記のレスポンスで
これで解決した。
rewrite の詳細
https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next.config.js/rewrites
公式を見ると、
rewrite / source, destination は
proxy として mask するとある
/ へのリクエストを /about に変えて送るものだと解釈した。
なのでこの rewrite と proxy を使う。
localhost 3000 にリクエストさせるように見せる。
実際は localhost 8080 にリクエストさせる。
Next からは localhost 3000 の自分自身に送るように見える。
なので CORS エラーが出ない。
以上。
Top comments (0)