Vue3请求Fastapi接口提示No 'Access-Control-Allow-Origin' header is present...

问题出现

在使用Vue3和Fastapi做前后端分离项目时，前端调用接口console报错：
No 'Access-Control-Allow-Origin' header is present on the requested resource

解决方法

在网上找了一圈方案无果，最终在Stackoverflow上看到一个低赞回复，意思是调整Fastapi add_middleware在文档中的位置，尝试下居然可以。

原先代码中的位置如下：

app = FastAPI()
app.include_router(xxx, prefix='/xxx')

origins = [
    "http://localhost:8080",
]

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

@app.on_event("startup")
...
@app.on_event("shutdown")
...
@app.middleware("http")
...

将origins和app.add_middleware的位置移动到最末位，重启服务后前端访问果然不再报错！
于是我又将origins和app.add_middleware的位置恢复，重启后观察错误也不再发生，真是奇怪，如果有碰到相同问题的同学可以尝试下。