GET 请求不在 json 内容类型烧瓶中

Question

我正在尝试在网站上的路线上以 json 格式获取 sqlite 数据库的数据，这按预期工作，如果我要访问该链接，它会在 chrome devtools 的网络选项卡中显示内容类型是应用程序/json。这当然是我想要的，除非我使用 javascript 向这个特定路由发出 XML GET 请求，它会显示数据类型：text/html。有谁知道如何解决这一问题？ python烧瓶代码：

@app.route('/dossiers/all', methods=['GET'])
@login_required
def get_all_dosssiers():
    ids = executeQueryResult('SELECT dossierid FROM dossiers', [])
    # return jsonify(ids)
    print(ids[1].get('DossierId'))

    results = []
    for id in ids:
        results.append(get_dossier(id.get('DossierId')))
    return jsonify(results)

JS：

var request = new XMLHttpRequest()
request.open('GET', `http://127.0.0.1:5000/dossiers/all`, true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)
  if (request.status >= 200 && request.status < 400) {
    data.forEach((dossier) => {
      const card = document.createElement('button')
      card.setAttribute('class', 'card')

      const kruisje = document.createElement('button')
      kruisje.setAttribute('class', 'kruisje')

      const h1 = document.createElement('h1')
      h1.textContent = dossier.ziekte

      const p = document.createElement('p')
      dossier.description = dossier.description.substring(0, 300)
      p.textContent = `${dossier.behandeling}...`

      const id = dossier.dossierId

      container.appendChild(card)
      card.appendChild(kruisje)
      card.appendChild(h1)
      card.appendChild(p)

      card.addEventListener("click", function() {
        window.location = `dossier.html?id=${dossier.id}`
      })
    })
  } else {
    const errorMessage = document.createElement('p')
    errorMessage.textContent = `Het werkt niet...`
    app.appendChild(errorMessage)
  }
}

Answer 1

它可以做一些事情，从你的描述中很难说到底是什么。

1. CORS。根据您是否打开一个为localhost 并请求另一个为127.0.0.1，您可能需要设置XMLHttpRequest.withCredentials。

2. 根据 login_required 装饰器的工作方式，您可能会在未通过身份验证时拥有 HTML 登录页面。

3. 如果您正在运行 Flask < 0.11，那么如果您将 list 传递给它，则 jsonify 将不会运行。

   在 0.11 版中更改： 添加了对序列化顶级数组的支持。这在古代浏览器中引入了安全风险。见JSON Security。

   基本上，Array.prototype 在获取 JSON 资源时覆盖的漏洞，因为 Javascript 仅存在于古老的浏览器中，并且可以使用根列表。 pex 的几个例子。我在app.py 有这个。

   from flask import Flask, jsonify
   
   app = Flask(__name__)
   
   @app.route('/dossiers', methods=['GET'])
   def dossiers():
       return jsonify([{'foo': 'bar'}])
   
   if __name__ == '__main__':
       app.run()
   

   • pex "flask < 0.11" -- app.py

     $ curl -v localhost:5000/dossiers
     *   Trying 127.0.0.1...
     * Connected to localhost (127.0.0.1) port 5000 (#0)
     > GET /dossiers HTTP/1.1
     > Host: localhost:5000
     > User-Agent: curl/7.47.0
     > Accept: */*
     > 
     * HTTP 1.0, assume close after body
     < HTTP/1.0 500 INTERNAL SERVER ERROR
     < Content-Type: text/html; charset=utf-8
     < Content-Length: 290
     < Server: Werkzeug/2.0.1 Python/3.7.10
     < Date: Mon, 24 May 2021 13:05:12 GMT
     ...
     

   • pex "flask >= 0.11" -- app.py

     $ curl -v localhost:5000/dossiers
     *   Trying 127.0.0.1...
     * Connected to localhost (127.0.0.1) port 5000 (#0)
     > GET /dossiers HTTP/1.1
     > Host: localhost:5000
     > User-Agent: curl/7.47.0
     > Accept: */*
     > 
     * HTTP 1.0, assume close after body
     < HTTP/1.0 200 OK
     < Content-Type: application/json
     < Content-Length: 16
     < Server: Werkzeug/2.0.1 Python/3.7.10
     < Date: Mon, 24 May 2021 13:07:18 GMT
     < 
     [{"foo":"bar"}]
     * Closing connection 0