系统环境: mac +react+flask
问题说明,前端使用axios 本地调用python的数据接口. 在网上查询了各种资料,有很多解决办法,但是很遗憾,都没有解决我的问题.(可能是自己太小白,没有配置正确).现使用以下方案进行解决.
在flask端使用 “Flask-CORS”代理插件.(官网:https://flask-cors.readthedocs.io/en/latest/),安装成功后.编写代码:
后端flask 端执行的pyhon文件代码如下: 文件命名为 hello.py
import flask
from flask import request #获取参数
from flask_cors import CORS
server = flask.Flask(__name__) #创建一个flask对象
CORS(server)
@server.route('/login', methods=['get','post'])
def login():
username = request.values.get('username') #获取参数
password = request.values.get('password')
if username and password:
#sql = 'select User from user where User="%s"'%username
#data = conn_mysql(sql)
return '{msg:"无数据"}'
server.run(port=8000,debug=True)
编写完成后,在终端执行命令(必须先激活并进入到flask环境中,可参考flask环境搭建并激活): 执行以下命令启动服务:
python hello.py
服务启动后,在浏览器中输入以下网址:http://127.0.0.1:8000/login?username=xxx&password=123456,回车查看,将会看到以下界面:说明后端接口开发成功.
前端React 中app.js代码如下:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios' ;
import { Layout, Menu, Button,Breadcrumb, Icon } from 'antd';
class App extends Component {
constructor(props) {
super(props)
this.state = {
list:[] }
this.handleClick=this.handleClick.bind(this)
}
handleClick(){
let url="http://127.0.0.1:8000/login?username=xxx&password=123456"
axios.get(url)
.then(function (response) {
let data =response.data
alert(data);
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
Welcome to React
To get started, edit src/App.js and save to reload.
测试调用接口
);
}
}
export default App;
编辑完成后,启动React 服务:看到以下界面
点击“测试调用接口按钮后”弹出如下页面,则说明调用成功: