vue-resourceは、クロスドメイン時に直接POSTリクエストを送信できますか？

Question

私はvue.jsを使ってフロントエンドを構築し、それをhttp://localhost:8080で実行して、npm run devを開発します。

そしてフラスコを使ってバックエンドを構築し、http://localhost:8081で実行します。

私はまた、フラスコの私のルートのクロスドメインのデコレータを設定します。

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 

@app.route("/api", methods=['POST', 'OPTIONS']) 
@crossdomain(origin="*") 
def test(): 
    return "hello world" 

その後、私はバックエンドにvue-resourceでPOSTリクエストを送信しません：

this.$http.post("http://localhost:8081/api", "somedata").then({}, {}) 

んが、驚くほど、ブラウザセンドOPTIONSリクエスト

だから私の質問は以下のとおりです。

1. 今サーバー側がクロスドメインを許可していることを、私はvue-resourceによって直接POSTリクエストを送ることができますか？
2. もしそうでなければ、flask_corsからCORSを使用する必要がありますか？
3. 私はフロントエンドとバックエンドの両方を8080ポートで実行することができますが、これはクロスドメインの問題を防ぐことができますか？

Answer 1

あなたのフロントエンドコードをすべて見たわけではありませんが、Vue.http.headersを設定していればうれしいですね。

あなたは、フロントエンドには、このようなあなたの共通ヘッダーを設定することができます

Vue.http.headers.common['Access-Control-Allow-Origin'] = value; 

ここ

詳細情報： CORS issue with Vue.js