fastapi-swagger 使用nginx反向代理后调接口404

2024 年 02 月 21 日

258 次浏览

1366字数

# 引言

最近公司的一个紧急项目，前端开发的时候，try it out 不通，404，仔细看看，实际上是swagger调用接口时候，没有加上反向代理的路径
![image.png](https://www.zunmx.top/usr/uploads/2024/02/3335709723.png)

# 解决方法

找文档，大多数都是java的，`swagger_ui_parameters`参数貌似也没找到，所以另辟蹊径了一下，因为内网项目，所以把swagger依赖的前端工程给拉到了本地。

```python
@app.get("/docs", include_in_schema=False)
async def custom_swagger_ui_html():
    return get_swagger_ui_html(
        openapi_url="./openapi.json",  # 如果使用默认的，也会找不到这个文件,
        title=app.title + " - Swagger UI",
        oauth2_redirect_url=app.swagger_ui_oauth2_redirect_url,
        swagger_js_url="static/swagger-ui-bundle.js",
        swagger_css_url="static/swagger-ui.css",
    )
```

## 编辑swagger-ui-bundle.js

格式化（使用的IDEA）后大概4624行的位置，添加了一段注入代码
![image.png](https://www.zunmx.top/usr/uploads/2024/02/3976342772.png)

```javascript
if(!t.url.endsWith('openapi.json')){
      t.url=t.url.replace(window.location.origin+"/",window.location.href.split("docs#")[0])
}
```

# 原理和思考过程

每次调用接口的时候，都会走统一的一个入口，根据`开发者工具`中的启动器，可以找到代码位置，我当时是加了一个`console.log`，看看都哪儿走这个方法了，后来发现`openapi.json`也走这个方法了，因为python代码中用的是`./`，所以就不管了，如果是其它的异步请求，那就加上反向代理的路径。

![image.png](https://www.zunmx.top/usr/uploads/2024/02/2918052433.png)

![image.png](https://www.zunmx.top/usr/uploads/2024/02/1462143874.png)

# 结语

⚠ 如果是使用的在线cdn，这个方法不适用
⚠ 注入方式存在一定风险，此方法未经严格测试
ℹ 由于使用公司项目进行演示，所以关键信息需要打码