30. Flask 设置headers Access-Control-Allow-Origin实现跨域访问

需求一般前端如果直接发起请求至后台，都会出现跨域问题。报错如下：17 Vue 使用 vue-resource 发起get、post、jsonp请求.html:1 Access to XM...

海洋的渔夫

3115人浏览 · 2020-09-24 11:36:34

海洋的渔夫 · 2020-09-24 11:36:34 发布

需求

一般前端如果直接发起请求至后台，都会出现跨域问题。报错如下：

17 Vue 使用 vue-resource 发起get、post、jsonp请求.html:1 Access to XMLHttpRequest at 'http://127.0.0.1:5000/login' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

下面示例Flask设置headers['Access-Control-Allow-Origin']='*'头信息，解决跨域api问题。

Flask示例如下：

from flask import Flask, jsonify,request,make_response

# 实例化app
app = Flask(import_name=__name__)


@app.route('/login', methods=["GET","POST"])
def login():

    method = request.method

    res = make_response(jsonify(token=123456, gender=0, method = method))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
    return res

if __name__ == '__main__':
    app.run(debug=True)

此时，设置好了这两个headers的参数，如下：

res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

则会允许 get、post 的跨域请求，下面前端测试如下。

前端测试执行跨域get、post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入vue-resource，注意：需要先引入vue.js  -->
    <script src="lib/vue-resource-1.5.1.js"></script>

</head>
<body>

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>

<script>

    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getInfo() { // 发起get请求
                //  当发起get请求之后， 通过 .then 来设置成功的回调函数
                this.$http.get('http://127.0.0.1:5000/login').then(function (result) {
                    // 通过 result.body 拿到服务器返回的成功的数据
                    // console.log(result.body)
                })
            },
            postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
                //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
                //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
                this.$http.post('http://127.0.0.1:5000/login', {}, { emulateJSON: true }).then(result => {
                    console.log(result.body)
                })
            },
        },

    });

</script>

</body>
</html>

浏览器执行前端请求如下：

执行get请求

执行post请求

此时get和post都可以跨域请求了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^