Chromeからactix-webにHTTPリクエストを実行した際に発生したCORSエラーの解消

環境についてざっくり クライアント側 ブラウザ: Google Chrome バージョン 87.0.4280.141 (Official Build) (64ビット) OS: Windows 10 Home 19041.746 HTTPクライアント: axios v0.21.1 サーバ側 OS: Raspbian GNU/Linux 10 (buster) webフレームワーク: actix-web v3.3.2 現象 Access to XMLHttpRequest ... has been blocked by CORS policyというエラーが出力される Raspberry Pi 4 Model B上でバックエンド(actix-web)とフロントエンド(Vue CLI)を稼働させている。WindowsPCからブラウザを使ってフロントエンドにアクセスし、axiosを使ってバックエンド(actix-web)にGETリクエストを実行した。すると、ブラウザのコンソールに以下のようなエラーが出力された。(ローカルIPが記述されていたところは一部編集している。) Access to XMLHttpRequest at 'http://<localIP>:50001/' from origin 'http://<localIP>:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource....

January 16, 2021 · 2 min