对于web前端页面，如果访问的地址与域名不一致时，就会出现跨域问题，这种情况，每次js的请求发起时，浏览器会自动发送一个OPTIONS请求进行验证。

可以看到，每个请求都会发送两个，其中一个是浏览器发送的。如果服务不支持跨域，就会提示如下CORS policy的错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8092/' from origin 'http://192.168.10.135:38312' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
1

这就是服务不支持跨域了。使用flask创建的服务支持跨域有如下两种方法。

1 使用flask_cors

flask框架有个自带的支持的跨域的模块，在创建的服务的时候调用这个，就能很方便的支持跨域操作，代码如下：

from flask import Flask
from flask import request
from flask_cors import *


app=Flask(__name__)
#支持跨域
CORS(app, resources=r'/*')

@app.route('/',methods=['GET','POST','OPTIONS'])
def post():
    return 'success'

if __name__=='__main__':

    app.run(host='0.0.0.0',port='8092',debug=False)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

重新进行测试，可以看到没有跨域的错误了。

2 增加响应头

第二种方法是增加响应头，因为跨域的原理是浏览器发送的OPTIONS，服务端会返回几个响应头，根据这些响应头，浏览器判断服务端是否允许请求访问，因此只要把服务端的返回增加响应头就可以。
增加如下三个响应头即可：

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:*
Access-Control-Allow-Headers:*
1
2
3

服务代码如下：

from flask import Flask
from flask import request


app=Flask(__name__)


@app.route('/',methods=['GET','POST','OPTIONS'])
def fpdk_post():
    if request.method=='OPTIONS':
        return '',200,[('Access-Control-Allow-Origin','*'),('Access-Control-Allow-Methods','*'),('Access-Control-Allow-Headers','*')]
    elif request.method=='POST':   
        return '',200,[('Access-Control-Allow-Origin','*'),('Access-Control-Allow-Methods','*'),('Access-Control-Allow-Headers','*')]



if __name__=='__main__':

    app.run(host='0.0.0.0',port='8092',debug=False)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

进行测试，可以发现，同样能进行跨域访问。

其实flask_cors的原理也是封装好的，默认把所有请求的响应头增加几个允许跨域的响应头。