Flask， Access-Control-Allow-Origin 跨域请求的解决方法

1、问题描述

由于浏览器受同源策略的限制，在使用 XMLHttpRequest 对象进行跨域请求时，通常会报 No ‘Access-Control-Allow-Origin’ header is present on the requested resource 错误，导致请求失败。

2、解决思路

解决该问题的基本思路是使用 CORS(Cross-Origin Resource Sharing) 或 JSONP ，具体到 Flask 场景R，方法如下。

3、跨域的具体实现

（1）导入flask_cors 模块

pip install flask_cors
1

（2）配置代码如下

伪代码 ：

from flask import Flask

## 1、导入flask_cors 模块 ，pip install flask_cors
from flask_cors import CORS

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False

@app.route('/',methods=['GET', 'POST','OPTIONS'])
def  hello(resp):
	
	 data ={
        "status":200,
        "message":'查询成功',
        "list":[
            {
                "name":"张三",
            },
            {
                "name": "李四",
            },
            {
                "name": "wangwu",
            }
        ]
    }
    
    json_str = json.dumps(data, ensure_ascii=False)
    resp = make_response(json_str)
    
	# 2、headers 中进行设置
    resp.headers["Content-Type"] = "application/json;chartset=UTF-8"  # 设置响应头
    resp.headers['Access-Control-Allow-Origin'] = '*'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS' # 如果有其它方法（delete,put等），断续添加
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp


if __name__ == '__main__':	
	app.run(debug=True)
	## 3、调用 CORS 
	CORS(app)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

完整代码如下：

import json
from flask import Flask,make_response,request, url_for, redirect, render_template

## 1、导入flask_cors 模块 ，pip install flask_cors
from flask_cors import CORS

app = Flask(__name__)  # 在当前文件下创建应用
app.config['JSON_AS_ASCII'] = False

@app.route('/',methods=['GET', 'POST','OPTIONS'])
def hello():
     data ={
        "status":200,
        "message":'查询成功',
        "list":[
            {
                "name":"张三",
            },
            {
                "name": "李四",
            },
            {
                "name": "wangwu",
            }
        ]
    }

    json_str = json.dumps(data, ensure_ascii=False)
    resp = make_response(json_str)

    # 2、headers 中进行设置
    resp.headers["Content-Type"] = "application/json;chartset=UTF-8"  # 设置响应头
    resp.headers['Access-Control-Allow-Origin'] = '*'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS'  # 如果有其它方法（delete,put等），断续添加
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp


if __name__ == '__main__':
    app.run(debug=True)
    ## 3、调用 CORS
    CORS(app)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43