Failed to fetch - Mixed Content の原因と解決策

概要

HTTPSページからHTTPリソースへのリクエストがブロックされている場合に発生します。ブラウザのセキュリティ機能により、セキュアなページから非セキュアなリソースへのアクセスが制限されます。

Consoleに以下のようなメッセージが出る場合、Mixed Contentが原因です:

Mixed Content: The page at 'https://...' was loaded over HTTPS,
but requested an insecure resource 'http://...'

1
2
3
4
5
// NG
fetch('http://api.example.com/data');

// OK
fetch('https://api.example.com/data');

1
2
// 現在のページのプロトコルに合わせる
fetch('//api.example.com/data');

1
2
3
4
5
// .env
// VITE_API_URL=https://api.example.com

// コード内
fetch(`${import.meta.env.VITE_API_URL}/data`);

Let’s Encryptなどを使用して、APIサーバーにSSL証明書を設定してください。

1
2
# Let's Encrypt + Certbot
sudo certbot --nginx -d api.example.com