前言

学习前端网络请求部分的时候，用Flask实现一个简单的后端服务器，但是遇到了跨域问题。

跨域

什么是跨域

以下内容摘自知乎：跨域的那些事儿 - 知乎 (zhihu.com)

造成跨域的两种策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种：

DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

为什么要有跨域限制

跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

解决跨域问题

这里只讲一种方式，其他自行百度。（后面如遇到其他跨域问题再补充）

Python | Flask 解决跨域问题

pip引入flask-cors库
1
pip install flask-cors

配置

flask-cors有两种用法，一种为全局使用，一种对指定的路由使用。

使用CORS()配置全局路由：

from flask import Flask,request
from flask_cors import CORS  #导入CORS库

app = Flask(__name__)
CORS(app, supports_credentials=True)  #配置全局路由

@app.route("/",methods=["GET","POST"])
def test():
    if request.method=="GET":
        return "get请求已收到"
    elif request.method=="POST":
        return "post请求已收到"
    else:
        return "网络请求方式不正确"


if __name__=="__main__":
    app.run()

使用@cross_origin()配置单一指定路由：

from flask import Flask,request
from flask_cors import cross_origin  #导入cross_origin库

app = Flask(__name__)

@app.route("/",methods=["GET","POST"])
@cross_origin(supports_credentials=True)  #配置单一指定路由
def test():
    if request.method=="GET":
        return "get请求已收到"
    elif request.method=="POST":
        return "post请求已收到"
    else:
        return "网络请求方式不正确"


if __name__=="__main__":
    app.run()