フラスコとアヤックスを使用したクロスオリジンの問題

Question

"Cross-Origin Request Blocked"に問題があります。私はサーバーから、すべてのもの（ "*"）よりも最初に許可しようとしました。クロム開発者向けツールキットでも同じエラーメッセージが表示されます。

var baseURL = "http://localhost:8000"; 

function getLiveData(data){ 
    //Get the parameters descriptions 
    $.ajax({ 
     method: 'GET', 
     url:baseURL + '/get-live-data', 
     headers: { 
      "Accept" : "application/json", 
      "Content-type": "application/json" 
     }, 
     success:function(data){ 
       console.log(data); 
       //populateAccordion(data);  
     }, 

     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      console.log("Status: " + textStatus); 
      console.log("Error: " + errorThrown); 
      } 
    }); 
} 

は、あなたの答えをありがとう：

application = Flask(__name__) 
application.config.from_object(__name__) 
cors = CORS(application, resorces={r'/*': {"origins": '*'}}) 

@application.route("/get-live-data",methods=['GET']) 
@cross_origin() 
def live_data(): 
    con = connect_db() 
    cur = con.cursor() 
    cur.execute("SELECT * from envoiContinuT") 
    sqlite_result = cur.fetchall() 
    cle = json.load(open(JSON_STATUS)) 
    parametres = json.load(open(JSON_PARAMETRES)) 
    descT = [] 
    for key in cle["status"]: 
     attr = parametres[key] 
     if attr["envoiC"] == 1: 
      descT.append(attr["description"]) 
    response = any_response(flask.jsonify(data=descT)) 
    return response 

はここに私のAjaxコードです：

は、ここに私のフラスコPythonコードです！

Answer 1

あなたがここにタイプミスがあります

cors = CORS(application, resorces={r'/*': {"origins": '*'}}) 
         ^^^^^^^^ 

は次のようになります。

cors = CORS(application, resources={r'/*': {"origins": '*'}}) 

また、GET要求ためContent-typeリクエストヘッダを送信するにはポイントがありません。 GETリクエストのリクエスト本文はないため、コンテンツタイプを指定する必要はありません。あなたがCORS preflight OPTIONS requestを行うには、ブラウザをトリガー値application/json、とContent-Typeリクエストヘッダを送信し、あなたの設定がそれを許可しなければならない場合、それ以外の

headers: { 
    "Accept" : "application/json", 
}, 

：

@application.route("/get-live-data",methods=['GET', 'POST']) 
@cross_origin(headers=['Content-Type']) # Send Access-Control-Allow-Headers 

だからではなく、ただ、これを行いますしかし、Content-Typeリクエストヘッダーを許可した場合は、上記のようにPOSTリクエストも許可することができます（前述のように、GETリクエストのみを許可することはできません）。