AngularJS+ngTable+plunker将无法正确渲染表

Question

巴克ground

我有点鸡和蛋的问题：

• 我构建了一个演示Web应用来说明我在AngularJS+ngTables中遇到的一个具有挑战性的问题；然而，我的webserver日志告诉我，没有人真正关心我的演示webapp，他们只想要一个plunker
• 我甚至构建了一个演示Web应用程序plunker；然而，plunker的行为与我的演示webapp不同。因此，这个问题

问题

请帮助我理解原因：

• 如果您在搜索框中键入字符，我的演示Web应用程序将从json数据中呈现ngTable
• 演示webapp plunker根本拒绝呈现json数据

我意识到灌篮高手很受欢迎；然而，演示的webapp plunker并没有帮助，因为我无法让它像我的webapp那样工作；我真的把HTML直接从我的演示网络应用程序复制到了plunker中。也许我做错了什么，但我需要帮助来理解我做错了些什么(如果有的话(。

显式分辨率

我正在使用Flask+Python来渲染json数据。。。明确的修复是。。。

from functools import update_wrapper
from datetime import datetime, timedelta
from json import dumps
from flask import Response, Flask, redirect, url_for, abort, render_template, flash
## Other imports here...
def crossdomain(origin=None, methods=None, headers=None,
                max_age=21600, attach_to_all=True,
                automatic_options=True):
    if methods is not None:
        methods = ', '.join(sorted(x.upper() for x in methods))
    if headers is not None and not isinstance(headers, basestring):
        headers = ', '.join(x.upper() for x in headers)
    if not isinstance(origin, basestring):
        origin = ', '.join(origin)
    if isinstance(max_age, timedelta):
        max_age = max_age.total_seconds()
    def get_methods():
        if methods is not None:
            return methods
        options_resp = current_app.make_default_options_response()
        return options_resp.headers['allow']
    def decorator(f):
        def wrapped_function(*args, **kwargs):
            if automatic_options and request.method == 'OPTIONS':
                resp = current_app.make_default_options_response()
            else:
                resp = make_response(f(*args, **kwargs))
            if not attach_to_all and request.method != 'OPTIONS':
                return resp
            h = resp.headers
            h['Access-Control-Allow-Origin'] = origin
            h['Access-Control-Allow-Methods'] = get_methods()
            h['Access-Control-Max-Age'] = str(max_age)
            if headers is not None:
                h['Access-Control-Allow-Headers'] = headers
            return resp
        f.provide_automatic_options = False
        return update_wrapper(wrapped_function, f)
    return decorator
### Use @crossdomain() decorator to fix my plunker's ajax request
@app.route('/demo/api/v1/data01', methods=['GET'])
@crossdomain(origin='*')
#@login_required
def send_all_tasks():
    """Send all tasks back to AngularJS"""
    retval = [
        {'Column02': 'shines', 'Column03': 'paycheck', 'Column01': 'days'},
        {'Column02': 'erg', 'Column03': 'gag', 'Column01': "emotion's"},
        ]
    return Response(dumps(retval), mimetype='application/json')

Answer 1

欢迎来到跨来源资源共享的世界。如果您检查plunkr中的控制台，您会发现json的ajax请求失败，并出现以下错误。。。

XMLHttpRequest cannot load http://demo.pennington.net/demo/api/v1/data01. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access. 

默认情况下，只有您的域(demo.pennington.net(提供服务的页面才能对您的域进行ajax调用。这是出于安全目的。您可以将服务器配置为允许来自plunkr.co的请求，方法是设置一个值为plunkr-co的"访问控制允许起源"标头(如错误消息所示(，但这将允许任何创建plunkr的人向您的网站发送ajax请求。这不是很安全。如果我是你，我会在你的plunkr中硬编码json并删除ajax请求。