AWS EC2にデプロイしたFetch APIが動かない

ローカルで開発していたアプリケーションをAWS EC2にデプロイした際に
Fetch APIがうまく動きません。

開発しているアプリケーションの言語は、
React + Django REST frameworkです。

ローカルではDockerを使っており、
サーバーは、Djangoのrunserverを使っています。
(python3 manage.py runserver 0.0.0.0:8000)

このアプリケーションをAWS EC2にデプロイするにあたって、
NginxでReactを動かして、GunicornでAPIを動かしています。

APIはReactからfetch()を使って呼んでいるのですが、EC2にデプロイすると動きません。
fetch()が動いていないのではないかと思っています。

以下、該当箇所のソースです。
ローカル環境では動いていたものになります。

    submit_test(event){
        const { cookies } = this.props
        this.render();
        APITest("http://localhost:8000/api/test",this.state.data)
        .then((res) => {
            console.log("受信", res)
            if(res.token){
                cookies.set('token',res.token)
                window.location.href="/Top"
            }else{
                this.setState({message:"NG"})
            }
            
            this.render()
        })
        event.preventDefault()
    }

    export async function APITest(url,data){
    const response=await fetch(url, {
        method: "POST",
        mode:'cors',
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
    })
    return response.json()
}

EC2上ではAPIを動かすために、Gunicornを使っているので
APITestメソッドに渡している第一引数である
http://localhost:8000/api/testを
http://127.0.0.1:8000/api/testに変えて実行したのですが、動きませんでした。

どなたかわかる方、教えていただけると嬉しいです。

hoshi-takanori

2021/05/19 04:18 編集

EC2 のサイトのホスト名か IP アドレスを指定しないと動くわけがないでしょうね…。

k_takahashi

2021/05/19 04:47 編集

APITest("http://localhost:8000/api/test",this.state.data) ↓ APITest("http://[EC2インスタンスのIP]/api/test",this.state.data) と APITest("http://[EC2インスタンスのIP]:8000/api/test",this.state.data) でやってみたのですが、動きませんでした...