为什么这个API调用返回[object Promise]



我用FastApi创建了一个API,这是它存储在其中的唯一东西:{"数据":[-17,23,-11,-10,-7]}。我已经测试过了,当我用Python运行它时,它会返回正确的结果。但为什么在我创建的Vue.js网站中,当我使用Axios调用它时,它只返回[object Promise]?

<script>
import ProductService from '../service/ProductService';
import axios from 'axios';
export default {
data() {
return {
products: null,
lineData: {
labels: ['january', 'second', 'third', 'fourth', 'fifth'],
datasets: [
{
label: 'Revenue',
data: [-0, 23, -11, -10, -7],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Profits',
data: [], # I want my API to put the list of datapoints here
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
},
items: [
{label: 'Add New', icon: 'pi pi-fw pi-plus'},
{label: 'Remove', icon: 'pi pi-fw pi-minus'}
]
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data);
axios #Here I am calling the API
.get('http://localhost:8000/')
.then(response => {(this.lineData.datasets[1].data = response.data)})
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}
}
</script>

编辑:好的,现在我记录了。这就是我得到的:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

createError createError.js:16
handleError xhr.js:117
dispatchXhrRequest xhr.js:114
xhrAdapter xhr.js:15
dispatchRequest dispatchRequest.js:58
request Axios.js:108
method Axios.js:129
wrap bind.js:9
mounted Dashboard.vue:285
callWithErrorHandling runtime-core.esm-bundler.js:6992
callWithAsyncErrorHandling runtime-core.esm-bundler.js:7001
__weh runtime-core.esm-bundler.js:2270
flushPostFlushCbs runtime-core.esm-bundler.js:7193
flushJobs runtime-core.esm-bundler.js:7230```

好的,现在已经修复了。

我也添加到了fastapi python文件中:

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)

是的,我知道使用通配符不是一个好的做法。

最新更新