前言

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


跨域

什么是跨域

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

造成跨域的两种策略

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

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

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

为什么要有跨域限制

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

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

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

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

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

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

解决跨域问题

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

Python | Flask 解决跨域问题

  1. pip引入flask-cors

    1
    pip install flask-cors
  2. 配置

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

    • 使用CORS()配置全局路由:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      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()配置单一指定路由:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      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()

后记

日后再补充。