HTML代码

将以下内容保存为x.htm，并且上传到服务器如http://blog.uhaka.com/x.htm

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <title>JSON取数测试</title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <div id="main">
  14.         <table border=1>
  15.             <tr>
  16.                 <td>id</td>
  17.                 <td>name</td>
  18.                 <td>type</td>
  19.                 <td>location</td>
  20.             </tr>
  21.             <tr v-for="r in rows">
  22.                 <td>{{r.id}}</td>
  23.                 <td>{{r.name}}</td>
  24.                 <td>{{r.type}}</td>
  25.                 <td>{{r.location}}</td>
  26.             </tr>
  27.         </table>
  28.     </div>
  29. </body>
  30. <script>
  31.     $(document).ready(function () {
  32.         $.getJSON("https://你的地址.com/x.json", function (result, status) {
  33.             var v = new Vue({
  34.                 el: '#main',
  35.                 data: {
  36.                     rows: result
  37.                 }
  38.             })
  39.         });
  40.     });
  41. </script>
  43. </html>

远程json接口内容

  • 保存以下内容，以flask为例。
  • 注意添加cors白名单，譬如前面htm在x.com，那么对应的cors添加x.com到信任白名单，否则取不到数据。
  • flask可能需要安装flask-cors
  1. pip install flask-cors
  • flask开启一个Json代码 ```python

    coding:utf-8

    from flask import Flask,request from flask import Blueprint from flask_cors import *

    app = Blueprint(‘x’,name,subdomain=’x’)

app = Flask(name)

此处注意orgins后面添加白名单，不能设置成允许*，会有json劫持漏洞。

cors = CORS(app, resources={r”/*”: {“origins”: “http://blog.uhaka.com"}})

@app.before_request def before_request(): if request.url.startswith(‘http://‘): url = request.url.replace(‘http://‘, ‘https://‘, 1) return redirect(url, code=301)

@app.route(“/“) def index(): return “hello,ming”

@app.route(“/x.json”) def hello():

  1. # 理应从数据库里查询，然后使用类似fastjson包装成json输出。
  2. # 这里写成静态的作为Demo。
  3. strs = '[{"id":1,"name":"张三","type":"工业","location":"市局"},{"id":2,"name":"李四","type":"工业","location":"市局"}]'
  4. return strs

if name == ‘main‘:

  1. #app = Flask(__name__)
  2. app.config['SERVER_NAME'] ='x.com'
  3. app.run(host='0.0.0.0',port=443,ssl_context=('你的证书路径.pem', '你的证书路径.key'))

```

访问与验证结果

image.png