如何允许mkdocs中的AJAX端点

Question

可视化是在本地AJAX服务器驱动的mkdocs中获取这工作。

这个例子很难举例，但我会的。在我这么做之前，问题是我想使用各种ajax端点来驱动MkDocs中的Vega可视化。但我遇到了CORS许可。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://machine1:8080/dataflare. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

我很难找到关于如何解决这个问题的文档，所以，有人知道我们如何在mkdocs中启用它吗？

该示例很长，但在使用本地数据源(而不是vega数据 )之前，这是可行的。当您将AJAX端点从"url": "https://vega.github.io/vega/data/flare.json"更改为http://myhost:8080/shortflare (或fullflare端点)时，您将得到上述CORS权限错误。

因此，客户端mkdocs应该启用端点作为安全的跨站点源，还是应该将AJAX瓶发送一个CORS头呢？我不明白为什么最初的AJAX在瓶子端点不工作的情况下工作。

现在是最难的部分。展示了一个例子.

这个简单的瓶服务器将是原始火焰数据的AJAX端点模仿：

• 数据样本在http://myhost:8080/shortflare上
• 完整数据集http://myhost:8080/fullflare通过来自https://vega.github.io/vega/data/flare.json的代理提供。 从瓶子导入路径，运行，模板导入请求DATAFLARE =‘{ "id"：1，"name"："flare“}，{ "id"：2，"name"："analytics"，”父“：1 }，{ "id"：3，"name"：”群集“，”父“：2 }，{ "id"：4，“名称”："AgglomerativeCluster"，“父”：3，“大小”：“3938 }”@路由(‘/游击队员’) def getflare()：返回DATAFLARE @路由(‘/fullflare’) def proxyflare()：返回requests.get('https://vega.github.io/vega/data/flare.json').text if __name__ == "__main__"：run(host='0.0.0.0'，port=8080，debug=True)

mkdocs设置(即mkdocs.yml)

site_name: VEGA

dev_addr: '0.0.0.0:2001'

theme:
    name: material
    nav_style: dark
    palette:
        accent: pink
        primary: lime




plugins:
    - search
    - charts
markdown_extensions:


  - pymdownx.superfences:
      custom_fences:
        - name: vegalite
          class: vegalite
          format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite

extra_javascript:
    - https://cdn.jsdelivr.net/npm/vega@5
    - https://cdn.jsdelivr.net/npm/vega-lite@5
    - https://cdn.jsdelivr.net/npm/vega-embed@6

我们需要

mkdocs==1.2.3
mkdocs-charts-plugin==0.0.6
mkdocs-material==7.3.6

以及标记以生成素食者图形(将其添加到index.md或任何地方)

Relational maps.

```vegalite

{

$schema："https://vega.github.io/schema/vega/v5.json"，

“描述”：“层次数据的节点链接图的笛卡尔布局示例”，

“宽度”：600，

“高度”：1600，

“填充物”：

“信号”：[

{

  "name": "labels", "value": true,

  "bind": {"input": "checkbox"}

},

{

  "name": "layout", "value": "tidy",

  "bind": {"input": "radio", "options": ["tidy", "cluster"]}

},

{

  "name": "links", "value": "diagonal",

  "bind": {

    "input": "select",

    "options": ["line", "curve", "diagonal", "orthogonal"]

  }

},

{

  "name": "separation", "value": false,

  "bind": {"input": "checkbox"}

}

],

“数据”：

{

  "name": "tree",

  "url": "https://vega.github.io/vega/data/flare.json",

  "transform": [

    {

      "type": "stratify",

      "key": "id",

      "parentKey": "parent"

    },

    {

      "type": "tree",

      "method": {"signal": "layout"},

      "size": [{"signal": "height"}, {"signal": "width - 100"}],

      "separation": {"signal": "separation"},

      "as": ["y", "x", "depth", "children"]

    }

  ]

},

{

  "name": "links",

  "source": "tree",

  "transform": [

    { "type": "treelinks" },

    {

      "type": "linkpath",

      "orient": "horizontal",

      "shape": {"signal": "links"}

    }

  ]

}

],

“比额表”：[

{

  "name": "color",

  "type": "linear",

  "range": {"scheme": "magma"},

  "domain": {"data": "tree", "field": "depth"},

  "zero": true

}

],

“标记”：[

{

  "type": "path",

  "from": {"data": "links"},

  "encode": {

    "update": {

      "path": {"field": "path"},

      "stroke": {"value": "#ccc"}

    }

  }

},

{

  "type": "symbol",

  "from": {"data": "tree"},

  "encode": {

    "enter": {

      "size": {"value": 100},

      "stroke": {"value": "#fff"}

    },

    "update": {

      "x": {"field": "x"},

      "y": {"field": "y"},

      "fill": {"scale": "color", "field": "depth"}

    }

  }

},

{

  "type": "text",

  "from": {"data": "tree"},

  "encode": {

    "enter": {

      "text": {"field": "name"},

      "fontSize": {"value": 9},

      "baseline": {"value": "middle"}

    },

    "update": {

      "x": {"field": "x"},

      "y": {"field": "y"},

      "dx": {"signal": "datum.children ? -7 : 7"},

      "align": {"signal": "datum.children ? 'right' : 'left'"},

      "opacity": {"signal": "labels ? 1 : 0"}

    }

  }

}

]

}

Answer 1

我发现了原因。瓶子服务器将需要发送适当的头。这是通过将这几行添加到瓶服务器来完成的。

from bottle_cors_plugin import cors_plugin
from bottle import app
    
app = app()
app.install(cors_plugin('*'))

if __name__ == "__main__":
    run(app=app, host='0.0.0.0', port=8080, debug=True)