status:0 フロントエンドとバックエンドの連携方法について

Question

実現したいこと

個人で開発を行っています。
amazon linux2の本番環境で、ブラウザからボタンをクリックし、
axios経由でapiにアクセスできるようにしたいです。
※開発環境では正常にアクセスできています。

発生している問題・分からないこと

ブラウザ検証ツール（ネットワーク）では詳細なエラーがわからなかったため、
console.logと、api側のアクセスとエラーログを取りました。

/proc/XXXXがどの設定に関わってくるのか、そしてそれが解決に関係あるのかわからないため聞きたいです。

エラーメッセージ

■検証ツールのconsole.log
Access to XMLHttpRequest at 'http://apiのエンドポイント' from origin 'http://IPアドレス' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
top.vue:60  API error: ae {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequestonabort: ƒ ()onerror: ƒ ()onload: nullonloadend: ƒ d()onloadstart: nullonprogress: nullonreadystatechange: nullontimeout: ƒ ()readyState: 4response: ""responseText: ""responseType: ""responseURL: ""responseXML: nullstatus: 0statusText: ""timeout: 0upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}withCredentials: false[[Prototype]]: XMLHttpRequeststack: "AxiosError: Network Error\n    at u.onerror (http://IPアドレス/js/chunk-vendors.92e18a6b.js:14:71005)"[[Prototype]]: Error
(匿名) @ top.vue:60
Promise.catch
apiTest @ top.vue:59
(匿名) @ runtime-dom.esm-bundler.js:296
l @ runtime-core.esm-bundler.js:158
s @ runtime-core.esm-bundler.js:166
s @ runtime-core.esm-bundler.js:176
n @ runtime-dom.esm-bundler.js:278
その他の 5 個のフレームを表示する
簡易表示
top.vue:53 

■journalctl -u uvicornサービス
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: Traceback (most recent call last):
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/apiを起動するPythonパス", line 122, in <module>
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: uvicorn.run("XXXX:app",host="X.X.X.X",port=XXXX,reload=True,log_level="info")
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/uvicorn/main.py", line 582, in run
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: ChangeReload(config, target=server.run, sockets=[sock]).run()
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/uvicorn/supervisors/basereload.py", line 50, in run
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: for changes in self:
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/uvicorn/supervisors/basereload.py", line 69, in __ne
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: return self.should_restart()
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/site-packages/uvicorn/supervisors/statreload.py", line 32, in shou
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: for file in self.iter_py_files():
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/site-packages/uvicorn/supervisors/statreload.py", line 52, in iter
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: for path in list(reload_dir.rglob("*.py")):
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/pathlib.py", line 1047, in rglob
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: for p in selector.select_from(self):
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/pathlib.py", line 493, in _select_from
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: for p in successor_select(starting_point, is_dir, exists, scandir):
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: File "/minicondaパス/pathlib.py", line 440, in _select_from
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: with scandir(parent_path) as scandir_it:
Aug 05 11:54:48 ip-172-26-4-110.ap-northeast-1.compute.internal python3.10[8910]: FileNotFoundError: [Errno 2] No such file or directory: '/proc/XXXX'

該当のソースコード

server {
         listen 80 default_server;
         listen [::]:80;
         server_name localhost; #ローカルホストからアクセスを受け取る
         index index.html index.js;
         root /フロントエンドのフォルダ;


         #front end
         location / {
                 try_files $uri $uri/ /index.html = 404;
         }
          #back end
         location /api/ {
          proxy_pass http://uvicornのドメイン/api/;
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

          add_header Access-Control-Allow-Origin *;
          add_header Access-Control-AllowMethods 'GET,POST';
          add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';
        }
     #エラーページ設定
        error_page 404 /404.html;
            location = /404.html {}

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

        async clickApiTest(){
            const result2 = await this.$axios.get('/api/アクセス確認用エンドポイント
            )
            .then(response => {
                // 成功処理
                console.log("response==>",response)
            })
            .catch(error => {
                console.error("API error:", error);
            });
        },

[Unit]
Description=server apiのサーバー名

[Service]
User=ユーザー名
Group=グループ名
ExecStart=/python実行ファイル /uvicornを実行するPythonファイル
Restart=always

[Install]
WantedBy=multi-user.target

■axios経由でapiにアクセスしたいコード
from fastapi import APIRouter
# #app.db.models テーブルを呼び出す
その他動作に必要なモジュールをimport

from logging import getLogger, StreamHandler, DEBUG

router = APIRouter(
    prefix="/api/エンドポイント名",
    tags=["エンドポイント名"],
    responses={404:{"description":"Not Found!"}},
)

@router.get("/api_test")
async def api_test():
    logger = getLogger(__name__)
    handler = StreamHandler()
    handler.setLevel(DEBUG)
    logger.setLevel(DEBUG)
    logger.addHandler(handler)
    logger.propagate = False

    logger.debug('hello')

    return json形式で結果を返すメソッド

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
from apscheduler.schedulers.blocking import BlockingScheduler
各種エンドポイントのモジュール

import uvicorn

import sys
sys.dont_write_bytecode = True

app = FastAPI()

app.include_router(各種エンドポイントのルーター)

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'], #ブラウザからapiへアクセス確認のため*にしてる。
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*']
)


if __name__ == "__main__":
    uvicorn.run("root:app",host="X.X.X.X",port=XXXX,reload=True,log_level="info")

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

curlコマンドとブラウザからそれぞれ、apiにアクセスできるか試しましたが特に問題ありませんでした。
procフォルダのことを調べましたが、メモリ上に作られる仮想的なファイルとしかわからず解決には至りませんでした。

補足

apiは、fastapiを使用してます。
Docker 未使用です。

Comments

[yu_1985]

まず、console.logの結果とjournalctl -u uvicornの結果に関連性があるかここに書いてあることだけから読み取ることが不可能なので、まず見えてるconsole.logのCORSのエラーについて調べてみてはどうでしょうか。

[Rabi_to]

コメントありがとうございます。
結論から言うと解決しました。

今回のCORSのエラーはchromeやEdgeで採用されているPrivate Network Access (formerly CORS-RFC1918)の影響の可能性があり、これが施されていないfirefoxで試したところ、axios経由でapiにアクセスできることが確認できました。

これで次のステップに入れます。ありがとうございました。

最後にyu_1985さんのコメントをベストアンサーとさせてください。

[yu_1985]

では、回答として書き直しておきます。

Answer 1

※コメントのところに書いたものと同じです
この質問の内容に対しては、まずconsole.logでCORSのエラーが出ているのでそこについての原因を調査すべきところです。

Access to XMLHttpRequest at 'http://apiのエンドポイント' from origin 'http://IPアドレス' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

Comments

[Rabi_to]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。