问题:如何通过 POST 请求将 JSON 数据从 Nuxt Axios 发送到 FastAPI 后端?

我正在尝试通过POST请求使用 Axios 从 Nuxt.js 发送用户数据。数据已经通过 Javascript cdn 函数提供,该函数返回带有user参数的对象,因此我不想使用form,因为我将收到的user数据转发为JSON。

我想知道我使用的方法是否正确?我需要发送user信息,以便将后端中的查询发送到外部 API(需要来自前端和后端的令牌,例如用户令牌和应用令牌)。

这是我当前的迭代:

    <script>
export default {
    head (){
        return {
            __dangerouslyDisableSanitizers: ['script'],
            script: [
                {
                    hid: 'platform-api',
                    src: "https://cdn-sample.app.com/api",
                    type: 'text/javascript',
                    defer: true
                },
            ]
        }
    },
    computed: {
        // Change user token parameter according to docs
        // Add Neccessary parameters
        auth_token: {
            get(){
               let userdata = getPlatformContext();
               this.$store.state.user.auth_token = userdata.auth_token;
               return this.$store.state.user.auth_token;
            },
            set(value){
                    this.$store.commit("item/storeAuthToken", value)
                }
        },
        // Additional parameters omitted as they extract each parameter in the same way
        // as above.
    methods: {
        // I tried to test it by sending just the user token by clicking a button
        async sendUserToken(auth_token) {
            await this.$axios.post(this.$config.baseURL, user.auth_token);
        },
        // Then i wanted instead to try and send the whole json dict of user data to 
        // backend and sort the data over in fastapi according to what i need.
        async sendUserData(user) {
            await this.$axios.post(this.$config.baseURL, user);
        }
        
    },
    
}

</script>

那么,如果我想将用户数据作为JSON格式的POST请求发送,而不是作为form,那么最好的方法是什么?

解答

下面是一个关于如何使用 Axios 将JSON数据发送到 FastAPI 后端的示例。数据应作为字符串化的JSON发送。可以使用JSON.stringify()函数来做到这一点,该函数用于将 JavaScript 对象转换为 JSON 字符串。相关答案可以在这里找到(选项 2)和这里(方法 3 和 4)。

app.py

from fastapi import FastAPI, Request, Body
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

app = FastAPI()
templates = Jinja2Templates(directory="templates")

class User(BaseModel):
    username: str
    address: str
    
@app.get("/")
def main(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})
  
@app.post("/submit")
def main(user: User):
    return user

注意:如果不喜欢使用 Pydantic 模型来发布 JSON 数据,他们可以改用Body字段,如文档此处和此处中所述。如果端点需要单个Body参数,则应使用特殊的Body参数 embed,如这个和[这个]zwz1003 答案所示。

模板/index.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script type="text/javascript">
function uploadJSONdata() {
    axios({
            method: 'post',
            url: '/submit',
            data: JSON.stringify({"username": "some name", "address": "some address"}),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
        })
        .then(response => {
            console.log(response);
            document.getElementById("p1").innerHTML = JSON.stringify(response.data);
        })
        .catch(error => {
            console.error(error);
        });
}
</script>
<p id="p1"></p>
<input type="button" value="submit" onclick="uploadJSONdata()">

上面是客户端(前端),它使用 Axios 来 POST JSON 数据。您正在使用的 JavaScript 框架/库(即 Nuxt.js)应使用与上述类似的方法。例如:

this.$axios.post('/submit', {
    username: 'some name',
    address: 'some address'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });