vue.js + fastapi環境で、CORSエラーの回避 Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. fastapi

vue.js + fastapi環境で、CORSエラーの回避

docker-compose上の別コンテナ環境にそれぞれ
vuejsとfastapi環境を構築し、fastapiでjsonを返すので
それをvuejsで表示するシステムを構築中。

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

みたいなエラーがでて先に進めず。
当初はこのエラーでぐぐると、vue.config.js内に、proxyを設定することで対応できそうな
検索結果があったので、それで修正していたが、うまくいかず。

結局はvuejs側でなく、fastapi環境で以下の設定をいれると、無事データがとりあえず表示できるようになった。
もっとうまい方法あるかはさておき、とりあえずはこれで。

------------------------------------
■main.py 内
from starlette.middleware.cors import CORSMiddleware

...

app.add_middleware(
CORSMiddleware
allow_origins=[ * ]
allow_credentials=True
allow_methods=[ * ]
allow_headers=[ * ]
)

------------------------------------

ちなみに chromeのconsoleにでてたエラーがこちら

------------------------------------
■ chromeのconsole.log
{
message : Network Error
name : AxiosError
config : {
transitional : {
silentJSONParsing : true
forcedJSONParsing : true
clarifyTimeoutError : false
}
transformRequest : [
null
]
transformResponse : [
null
]
timeout : 0
xsrfCookieName : XSRF-TOKEN
xsrfHeaderName : X-XSRF-TOKEN
maxContentLength : -1
maxBodyLength : -1
env : {
FormData : null
}
headers : {
Accept : application/json text/plain */*
}
method : get
url : ...
}
code : ERR_NETWORK
status : null
}
------------------------------------