问题出现
在使用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的位置恢复,重启后观察错误也不再发生,真是奇怪,如果有碰到相同问题的同学可以尝试下。