即使REST服务器设置了头部，仍然出现Access-Control-Allow-Origin错误

Question

我正在学习REST服务器和如何托管一个Flask服务器。

在服务器的URL上运行curl命令，我得到了：

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代码中使用了跨域装饰器代码片段。

以下是我处理服务器路由的示例：

@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