XMLHttpRequestがCORSポリシーによってエラーになるのを回避する方法

Flutter Web対応する際、RestAPI呼び出しのところで、jsのXMLHttpRequestがクロスドメイン超えられないと定番のエラーを吐きました。

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

利用しているAPIは外部APIとなるため、CORS用のheaderを追加してもらうことも出来ません。

しょうがないので、Flutter Webアプリと外部APIの間に、phpで作った簡易なプロキシサーバーを置くことで、CORSを回避しました。

foo.com → bar.com : 別ドメインとなるためjsで通信不可
foo.comfoo.com/proxy.php → bar.com : 同一ドメインとなるためjs通信可

proxy.phpは自分で書くのも面倒だったので以下を使わせてもらいました。

GitHub - GeniusGeeek/cors-bypass-proxy: A PHP proxy to solve client browser HTTP CORS(cross-origin) restrictions.
A PHP proxy to solve client browser HTTP CORS(cross-origin) restrictions. - GitHub - GeniusGeeek/cors-bypass-proxy: A PHP proxy to solve client browser HTTP COR...

これで無事問題を解決することができました。
こういうケースはFlutter Web対応以外でも必要になることがありそうなので備忘録として残しておきます。

コメント

  1. […] 上記3つに加えて、PHPでプロキシサーバを作る方法もあるようですが、実施してません。 […]

タイトルとURLをコピーしました