やりたかったこと
AWS AmplifyでホストするNext.jsのWebアプリがあります。
SORACOM SIMを挿したデバイスのブラウザでこのWebアプリを起動し、SORACOM Funkのエントリポイントを叩いてLambdaに接続したかったです。ちなみにHTTP通信には、Axiosというライブラリを使いました。
問題
エラーに直面しました！
そして最終的にこのエントリポイントは叩けませんでした。
- [blocked] The page at https://foo.bar.amplifyapp.com/hoge was not allowed to display insecure content from http://funk.soracom.io/. (675-73bf76adf43e6dc1.js, line 5)
- Not allowed to request resource
- XMLHttpRequest cannot load http://funk.soracom.io/ due to access control checks.
- Error occurred: – B {stack: "B@https://foo.bar.amplifyapp.com/…ext/static/chunks/675-73bf76adf43e6dc1.js:5:82357", message: "Network Error", name: "AxiosError", …}`
GPTくんに聞きました。
- 最初のエラーは、HTTPSで提供されるページが、HTTPプロトコルを使用して外部リソースにアクセスしようとしているため、ブラウザにブロックされたことを示しています。
- XMLHttpRequest cannot load http://funk.soracom.io/ due to access control checks.というエラーは、CORSポリシーにより、クロスオリジンリクエストがブロックされたことを示しています。CORSポリシーは、ウェブページが他のドメインのリソースに安全にアクセスできるようにブラウザに指示するものです。
HTTPとHTTPSが混在していること、CORSの2点が問題のようです。
試みたこと
1. HTTPとHTTPSの混在対策
Webアプリは要件的にどうしてもHTTPSの必要がありました。セキュリティ要件があったのと、カメラにアクセスするにはHTTPSが必須のようです。一方ソラコムのエントリポイントはhttpのみです。
上のエラーではErrorではなく、Warningだったので、問題ないかもと思ったのですが、PCブラウザではErrorになっていました。（SORACOM SIM挿してないのでそもそもうまくいきませんが）
つまり、今振り返って考えると、後述のCORSを見るまでもなく、この時点で既に詰んでいたとも言えます（笑）
2. CORS対策
2-1. メタデータサービスを使ってみる
ドキュメントはこちら。
[許可するオリジン]にアプリのオリジンのURLを入れてみましたが解決に至りませんでした。
2-2. Amplifyのカスタムヘッダーを設定
次はAmplify側をいじってみます。
カスタムヘッダーを設定してみました。
結果がこちら。これもダメでした。
2-3. リクエストのヘッダーにAccess-Control-Allow-Originを入れる。
CORSを許可するには、レスポンス側の設定をしてあげないといけないのは、過去に経験からわかってはいたものの、藁をも掴む思いで試してみました。案の定何の解決にもなりませんでした 
過去の経験↓
import axios from "axios";
const postToSoracom = async (val: string) => {
interface Payload {
val: string;
}
const payload: Payload = {
val,
};
const url = "http://funk.soracom.io";
const headers = {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*", // これを入れてみた
};
const response = await axios.post(url, payload, {
headers: headers,
});
return response;
};
2-4. サーバーサイドからAPIを叩く
フロントのブラウザから叩くのが問題なら、Next.jsだしサーバーサイドから叩けばあるいは...という話もありましたが、うまくいかず。
ただ、ここはあまり深掘りできなったので、完全にダメだったとは言い切れないです。
サーバーサイドから叩こうとして参照したサイトはこの辺。
最後に
今回の失敗から色々学ぶことができました。
また、余談ですがスマホでのデバッグで、コンソールを見たい時にこちらの方法でうまく行きました。
iPhoneとMacをUSBで物理的に接続するのをお忘れなく。