1

背景

ニワトリが先か卵が先かという問題があります。

質問

理由を理解するのを手伝ってください：

プランカーが人気だと思います。ただし、デモ webapp plunkerは、webapp のように動作させることができないため、役に立ちません。私は文字通り HTML をデモ webappから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')
4

1 に答える 1

3

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 の値で 'Access-Control-Allow-Origin' ヘッダーを設定することにより、plunkr.co からのリクエストを許可するようにサーバーを構成できますが、これにより、plunkr を作成した人は誰でも ajax を送信できるようになります。あなたのサイトへのリクエスト。これはあまり安全ではありません。私があなただったら、plunkr で json をハードコーディングし、ajax リクエストを削除します。

于 2014-03-16T19:58:24.267 に答える