Vue发送axios请求的跨域问题

vue发送axios的get请求接口问题

1.终端安装的axios

cnpm i axios -S

2.在main.js中导入axios

import axios from "axios"
Vue.prototype.$axios = axios

3.在你所需要的.vue文件中使用它

export default {
        data(){
            return{}
        },
        created(){
            this.getLunbotu();
        },
        methods:{
            getLunbotu(){
                this.$axios.get("http://127.0.0.1:8081/").then(result =>{
                    console.log(result.data);
                }).catch((e) => {console.log(123)})
            }
        }
    }

4.接口是用flask快速创建的

from flask import Flask,jsonify
app = Flask(__name__)

@app.route('/')
def getinfo():
    return jsonify({"a":1,"b":2})

if __name__ == '__main__':
    app.run(
        host='127.0.0.1',
        port = 8081,  # 端口
        debug = True
    )

5.此时flask会存在跨域问题，需要设置跨域插件flask_cors

from flask_cors import CORS
CORS(app,resources={r"/*": {"origins": "*"}})

6.此时，重新运行npm run dev，就可以获取到相关信息了