如何解决如何使用vue将请求发布到Flask?
我想post
将Vue中的数据发送到烧瓶
如果我不使用参数data: {}
,那没问题。
如果我使用,则会发生错误
这是服务器(HTTP状态码为200)
为什么会这样?我该怎么办?
代码:
Home.vue
<script>
import axios from 'axios'
export default {
created() {
this.getData();
},methods: {
getData() {
axios({
baseURL: 'http://127.0.0.1:5001',url: '/recData',method: 'post',data: {
firstName: 'Fred',lastName: 'Flintstone'
}
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
}
},}
</script>
fls_2.py
from flask import Flask,request
from flask_cors import CORS
app = Flask(__name__)
CORS(app,resources={r'/*': {'origins': '*'}})
@app.route('/')
def index():
return 'Hello World!'
@app.route('/recData',methods=['GET','POST'])
def recData():
if request.method=='POST':
return '--- post ---'
if request.method=='GET':
return '--- get ---'
if __name__=='__main__':
app.run(port=5001,debug=True)
解决方法
您可以在vue.config.js
module.exports = {
devServer: {
proxy: 'http://127.0.0.1:5001',}
}
此链接中有一篇很好的文章:https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3
,将其添加到vue.config.js
并在更改配置后重新启动服务器。
devServer: {
proxy: {
"/": {
target: "http://localhost:5001",ws: false,changeOrigin: true,logLevel: 'debug'
}
}
在组件中使用它。
let url = "/recData";
let payload = {
firstName: "Fred",lastName: "Flintstone"
}
axios.post(url,payload)
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
});
我希望它能起作用,并且能够为您提供帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。