更新(2021/2/10)

正常情况下,我们一般用nginx做反向代理,将接口反向代理到 vue等静态文件的域名。

例如 你的vue运行在nginx,域名为:www.example.com .那么可以将FastAPI的服务,从127.0.0.1:8080 反向代理到 www.example.com/api/下。

反向代理后,访问 www.example.com/api/user/zhangsan 就相当于访问 127.0.0.1:8080/user/zhangsan。

这样不仅能隐藏服务暴露出来的端口,也能对接多个服务。下面这种方法,也是解决方案之一,但是并不常用:

 

我们通常会拿FastApi来做接口,既然是接口服务,那么跨域传参是必然要碰到的问题。

现有情景如下我们的Api服务是127.0.0.0:8000,而我们的网站主域名是127.0.0.1,

不同端口属于不同域,下面的介绍也适合其他跨域场景比如主站是www.xx.com而api服务的域名是api.xx.com,同样适合。

现在网站要调用api的接口,我们用jquery的 ajax试一下:

建立一个测试文件zhiliao.html,写入如下内容并访问:



可以看到,由于是不同域,访问失败:


加上几行代码如下:

# -*- coding:utf-8 -*-

from fastapi import FastAPI 
from starlette.middleware.cors import CORSMiddleware  #引入 CORS中间件模块

#创建一个FastApi实例
app = FastAPI()

#设置允许访问的域名
origins = ["http://127.0.0.1"]  #也可以设置为"*",即为所有。

#设置跨域传参
app.add_middleware(
    CORSMiddleware, 
    allow_origins=origins,  #设置允许的origins来源
    allow_credentials=True,
    allow_methods=["*"],  # 设置允许跨域的http方法,比如 get、post、put等。
    allow_headers=["*"])  #允许跨域的headers,可以用来鉴别来源等作用。

#创建访问路径,下面的函数用来处理"/"的GET请求
@app.get("/")
def read_root():
    return {"Hello": "Api"}


@app.get("/hello/{name}")
def hello(name):
    res = {}
    res['name'] = name
    return res

@app.get("/zhiliao")
def read_args(name:str, age:int):
    return {"name": name, "age":age }

我们刷新浏览器:

跨域传参成功,获取数据成功。

标签: fastapi, 跨域, cors

分类: 所有文章

相关文章

2021.02.13   前后端完整演示FastAPI签发JWT tokens | FastAPI认证系统

2020.02.11   uvicorn ssl 使用证书文件启动fastapi,给你的网站加把小锁https

添加新评论