Question

Bakground

我有一点鸡蛋和鸡蛋的问题：

我构建了一个 demo webapp 来说明我对AngularJS + ngTables的a challenging problem;但是，我的网络服务器日志告诉我没有人真正关心我的demo webapp，他们只想要一个傻瓜。
我甚至建立了 demo webapp plunker ;但是，plunker的行为与我的demo webapp不同。因此，这个问题。

问题

请帮助我理解原因：

如果您在搜索框中输入字符，我的demo webapp会从json data呈现ngTable。
demo webapp plunker拒绝全部呈现json data

我意识到掠夺者很受欢迎;然而，demo webapp plunker没有帮助，因为我无法让它像我的webapp那样行事;我确实将HTML demo webapp直接复制到the plunker。也许我做错了什么，但我需要帮助理解我做错了什么（如果有的话）。

明确解决方案

我正在使用Flask + Python来渲染json data ...显式修复是......

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

欢迎来到Cross Origin Resource Sharing的世界。如果您检查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的请求，方法是设置“访问控制 - 允许 - 来源”和＃39;具有plunkr.co值的标头，如错误消息状态，但是这将允许创建plunkr的任何人向您的站点发送ajax请求。这不是很安全。如果我是你，我会在你的plunkr中硬编码json并删除ajax请求。

AngularJS + ngTable + plunker无法正确呈现表格

Bakground

问题

1 个答案: