前后端分离式开发时经常会出现的情况,前后端服务的ip或端口不同时就会出现跨域问题
以前端vue
为例,如果出现跨域问题,则会有如下的报错
解决方式:
from fastapi import FastAPI
# 导入跨域处理模块
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# 这里配置支持跨域访问的前端地址
origins = [
"http://localhost", # 带端口的
"http://localhost:8080", # 不带端口的
]
# 将配置挂在到app上
app.add_middleware(
CORSMiddleware,
# 这里配置允许跨域访问的前端地址
allow_origins=origins,
# 跨域请求是否支持 cookie, 如果这里配置true,则allow_origins不能配置*
allow_credentials=True,
# 支持跨域的请求类型,可以单独配置get、post等,也可以直接使用通配符*表示支持所有
allow_methods=["*"],
allow_headers=["*"],
)