即使REST服務器設置標題，訪問控制允許來源錯誤

Question

我想了解有關REST服務器和託管瓶服務器。

在服務器URL運行卷曲我得到：

HTTP/1.1 200 OK 
Access-Control-Allow-Methods: POST, OPTIONS, GET, HEAD 
Access-Control-Allow-Origin: * 
Access-Control-Max-Age: 21600 
Content-Type: text/html; charset=utf-8 
Date: Sat, 28 Jun 2014 07:08:41 GMT 
Server: gunicorn/19.0.0 
Content-Length: 36 
Connection: keep-alive 

但是，當我嘗試從另一個URL訪問數據，我得到：

的XMLHttpRequest不能加載 - 服務器URL - 。請求的資源上沒有「Access-Control-Allow-Origin」標題。起源 - 頁面url - 因此不允許訪問。

到目前爲止，我還試圖讓數據下面的代碼：

var formData = new FormData(); 
    formData.append("name",username); 
    formData.append("id", userid); 

    var request = new XMLHttpRequest(); 
    request.open("POST", "my-server-url"); 
    request.send(formData); 
    console.log("Running Create user") 
    console.log("Status: "+request.status); 
    console.log("error: "+request.error); 
    console.log("responseText: "+request.responseText); 

返回

Running Create user 
Status: 0 
error: undefined 
responseText: 

我與AJAX和jQuery嘗試也失敗，上述

描述了同樣的錯誤

$.ajax({ 
      url:'--server url--', 
      type:'POST', 
      data : mydata,  
      dataType: 'JSON', 
      success: function(data) { 
        console.log(data) 
      } 
     }); 

也

$.ajax({ 
       url:'--server url--', 
       type:'POST', 
       data : mydata,  
       dataType: 'JSONP', 
       async: false, 
       success: function(data) { 
         console.log(data) 
       } 
      }); 

我在Python代碼中使用了crossdomain decorator snippet。

對於我的服務器的路由處理一個樣本：

@app.route("/", methods=['POST', 'GET', 'OPTIONS']) 
@crossdomain(origin='*') 
def create(): 
    if request.method == 'POST': 
     name = request.form['name'] 
     id = request.form['id'] 
     #duplicate = collection.find_one({'name': name, 'token': token}) 
     duplicate = collection.find_one({'id': id}) 
     if not duplicate: 
      data = {'name': name, 
        'id': id} 
      collection.insert(data, safe=True) 
      response= make_response({'status': 'created'}, 201) 
      response.headers['Access-Control-Allow-Origin'] = "*" 
      return response 
     else: 
      response= make_response({'status': 'already exists'}, 302) 
      response.headers['Access-Control-Allow-Origin'] = "*" 
      return response 

Answer 1

我終於設法解決這個問題，我對Ajax代碼

var formData = new FormData(); 
formData.append("id", userid); 
$.ajax({ 
      url: '--server--', 
      type: 'POST', 
      data: formData, 
      processData: false, 
      contentType: false, 
      success: function(data){ 
       //do something with data 
       console.log(data) 
      }, 
      error: function(e) { 
        //handle error 
        console.log(e) 
        } 


      }) 

做了以下修改我不得不作出這也在服務器上發生變化：

@app.route("/", methods=['POST', 'GET', 'OPTIONS']) 
@crossdomain(origin='*') 
def create(): 
    if request.method == 'POST': 
     name = request.form['name'] 
     id = request.form['id'] 
     #duplicate = collection.find_one({'name': name, 'token': token}) 
     duplicate = collection.find_one({'id': id}) 
     if not duplicate: 
      data = {'name': name, 
        'id': id} 
      collection.insert(data, safe=True) 
      return jsonify({'status': 'created'}), 201 
     else: 
      return jsonify({'status': 'already exits'}), 302