Làm thế nào để yêu cầu bài đăng chia sẻ tài nguyên chéo (CORS) hoạt động hiệu quả

Tôi có một máy trên mạng lan cục bộ (machineA) có hai máy chủ web. Đầu tiên là cái được tích hợp sẵn trong XBMC (trên cổng 8080) và hiển thị thư viện của chúng tôi. Máy chủ thứ hai là tập lệnh python CherryPy (cổng 8081) mà tôi đang sử dụng để kích hoạt chuyển đổi tệp theo yêu cầu. Việc chuyển đổi tệp được kích hoạt bởi một yêu cầu AJAX POST từ trang được cung cấp từ máy chủ XBMC.

• Đi đến http://machineA:8080 trong đó hiển thị thư viện
• Thư viện được hiển thị
• Người dùng nhấp vào liên kết 'chuyển đổi' đưa ra lệnh sau:

jQuery Ajax Request

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})

• Trình duyệt đưa ra yêu cầu HTTP OPTIONS với các tiêu đề sau;

Tiêu đề yêu cầu - TÙY CHỌN

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with

• Máy chủ phản hồi như sau;

Tiêu đề phản hồi - TÙY CHỌN (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

• Cuộc trò chuyện sau đó dừng lại. Về lý thuyết, trình duyệt sẽ đưa ra yêu cầu ĐĂNG khi máy chủ phản hồi với các tiêu đề (?) CORS chính xác (Access-Control-Allow-Origin: *)

Để khắc phục sự cố, tôi cũng đã đưa ra lệnh $ .post tương tự từ http://jquery.com. Đây là nơi tôi bối rối, từ jquery.com, yêu cầu bài đăng hoạt động, một yêu cầu TÙY CHỌN được gửi theo sau bởi một BÀI ĐĂNG. Dưới đây là các tiêu đề từ giao dịch này;

Tiêu đề yêu cầu - TÙY CHỌN

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

Tiêu đề phản hồi - TÙY CHỌN (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

Tiêu đề yêu cầu - ĐĂNG

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

Tiêu đề phản hồi - ĐĂNG (STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

Tôi không thể tìm ra lý do tại sao cùng một yêu cầu lại hoạt động từ một trang web mà không phải từ trang khác. Tôi hy vọng ai đó có thể chỉ ra những gì tôi đang thiếu. Cảm ơn bạn đã giúp đỡ!

Cuối cùng tôi tình cờ nhận được liên kết này " Yêu cầu CORS POST hoạt động từ javascript thuần túy, nhưng tại sao không với jQuery? " Lưu ý rằng jQuery 1.5.1 thêm vào

 Access-Control-Request-Headers: x-requested-with

tiêu đề cho tất cả các yêu cầu CORS. jQuery 1.5.2 không làm được điều này. Ngoài ra, theo câu hỏi tương tự, việc đặt tiêu đề phản hồi của máy chủ

Access-Control-Allow-Headers: *

không cho phép phản hồi tiếp tục. Bạn cần đảm bảo tiêu đề phản hồi bao gồm cụ thể các tiêu đề bắt buộc. I E:

Access-Control-Allow-Headers: x-requested-with 

YÊU CẦU:

 $.ajax({
            url: "http://localhost:8079/students/add/",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error");
            }
        });

PHẢN ỨNG:

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")

return response

Tôi đã giải quyết vấn đề của riêng mình khi sử dụng API ma trận khoảng cách của google bằng cách đặt tiêu đề yêu cầu của mình với Jquery ajax. hãy xem bên dưới.

var settings = {
          'cache': false,
          'dataType': "jsonp",
          "async": true,
          "crossDomain": true,
          "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
          "method": "GET",
          "headers": {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
      }

      $.ajax(settings).done(function (response) {
          console.log(response);

      });

Lưu ý những gì tôi đã thêm ở cài đặt
**

"headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      }

**
Tôi hy vọng điều này sẽ giúp.

Đã cho tôi một thời gian để tìm ra giải pháp.

Trong trường hợp máy chủ của bạn phản hồi chính xác và yêu cầu là vấn đề, bạn nên thêm withCredentials: truevào xhrFieldstrong yêu cầu:

$.ajax({
    url: url,
    type: method,
    // This is the important part
    xhrFields: {
        withCredentials: true
    },
    // This is the important part
    data: data,
    success: function (response) {
        // handle the response
    },
    error: function (xhr, status) {
        // handle errors
    }
});

Lưu ý: jQuery> = 1.5.1 là bắt buộc

Tôi đã vật lộn với vấn đề này trong một vài tuần.

Cách dễ nhất, tuân thủ nhất và không hack để làm điều này có lẽ là sử dụng API JavaScript của nhà cung cấp không thực hiện các lệnh gọi dựa trên trình duyệt và có thể xử lý các yêu cầu Cross Origin.

Ví dụ: API JavaScript của Facebook và API của Google JS.

Trong trường hợp nhà cung cấp API của bạn không hiện tại và không hỗ trợ tiêu đề Cross Origin Resource Origin '*' trong phản hồi của nó và không có api JS (Vâng, tôi đang nói về bạn Yahoo), bạn sẽ gặp một trong ba tùy chọn-

1. Sử dụng jsonp trong các yêu cầu của bạn để thêm chức năng gọi lại vào URL của bạn, nơi bạn có thể xử lý phản hồi của mình. Lưu ý rằng điều này sẽ thay đổi URL yêu cầu, vì vậy máy chủ API của bạn phải được trang bị để xử lý? Callback = ở cuối URL.

2. Gửi yêu cầu đến máy chủ API của bạn, máy chủ do bạn kiểm soát và nằm trong cùng miền với máy khách hoặc đã bật Chia sẻ tài nguyên nguồn gốc chéo từ đó bạn có thể ủy quyền yêu cầu tới máy chủ API của bên thứ ba.

3. Có lẽ hữu ích nhất trong trường hợp bạn đang thực hiện yêu cầu OAuth và cần xử lý tương tác của người dùng Haha! window.open('url',"newwindowname",'_blank', 'toolbar=0,location=0,menubar=0')

Sử dụng điều này kết hợp với Laravel đã giải quyết được vấn đề của tôi. Chỉ cần thêm tiêu đề này vào yêu cầu jquery của bạn Access-Control-Request-Headers: x-requested-withvà đảm bảo rằng phản hồi phía máy chủ của bạn có bộ tiêu đề này Access-Control-Allow-Headers: *.

Đây là bản tóm tắt về những gì hiệu quả với tôi:

Xác định một hàm mới (được bao bọc $.ajaxđể đơn giản hóa):

jQuery.postCORS = function(url, data, func) {
  if(func == undefined) func = function(){};
  return $.ajax({
    type: 'POST', 
    url: url, 
    data: data, 
    dataType: 'json', 
    contentType: 'application/x-www-form-urlencoded', 
    xhrFields: { withCredentials: true }, 
    success: function(res) { func(res) }, 
    error: function() { 
            func({}) 
    }
  });
}

Sử dụng:

$.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
      if(obj.ok) {
           ...
      }
});

Cũng làm việc với .done, .fail, vv:

$.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
      if(obj.ok) {
           ...
      }
}).fail(function(){
    alert("Error!");
});

Phía máy chủ (trong trường hợp này là nơi lưu trữ example.com), hãy đặt các tiêu đề này (đã thêm một số mã mẫu trong PHP):

header('Access-Control-Allow-Origin: https://not-example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 604800');
header("Content-type: application/json");
$array = array("ok" => $_POST["x"]);
echo json_encode($array);

Đây là cách duy nhất tôi biết để thực sự ĐĂNG nhiều tên miền từ JS.

JSONP chuyển đổi POST thành GET có thể hiển thị thông tin nhạy cảm tại nhật ký máy chủ.

Vì lý do nào đó, một câu hỏi về yêu cầu GET đã được hợp nhất với câu hỏi này, vì vậy tôi sẽ trả lời câu hỏi đó tại đây.

Chức năng đơn giản này sẽ nhận được phản hồi trạng thái HTTP một cách không đồng bộ từ một trang hỗ trợ CORS. Nếu bạn chạy nó, bạn sẽ thấy rằng chỉ một trang có tiêu đề phù hợp mới trả về trạng thái 200 nếu được truy cập qua XMLHttpRequest - cho dù GET hay POST được sử dụng. Không thể làm gì ở phía máy khách để giải quyết vấn đề này ngoại trừ việc có thể sử dụng JSONP nếu bạn chỉ cần một đối tượng json.

Có thể dễ dàng sửa đổi phần sau để có được dữ liệu được giữ trong đối tượng xmlHttpRequestObject:

function checkCorsSource(source) {
  var xmlHttpRequestObject;
  if (window.XMLHttpRequest) {
    xmlHttpRequestObject = new XMLHttpRequest();
    if (xmlHttpRequestObject != null) {
      var sUrl = "";
      if (source == "google") {
        var sUrl = "https://www.google.com";
      } else {
        var sUrl = "https://httpbin.org/get";
      }
      document.getElementById("txt1").innerHTML = "Request Sent...";
      xmlHttpRequestObject.open("GET", sUrl, true);
      xmlHttpRequestObject.onreadystatechange = function() {
        if (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) {
          document.getElementById("txt1").innerHTML = "200 Response received!";
        } else {
          document.getElementById("txt1").innerHTML = "200 Response failed!";
        }
      }
      xmlHttpRequestObject.send();
    } else {
      window.alert("Error creating XmlHttpRequest object. Client is not CORS enabled");
    }
  }
}

<html>
<head>
  <title>Check if page is cors</title>
</head>
<body>
  <p>A CORS-enabled source has one of the following HTTP headers:</p>
  <ul>
    <li>Access-Control-Allow-Headers: *</li>
    <li>Access-Control-Allow-Headers: x-requested-with</li>
  </ul>
  <p>Click a button to see if the page allows CORS</p>
  <form name="form1" action="" method="get">
    <input type="button" name="btn1" value="Check Google Page" onClick="checkCorsSource('google')">
    <input type="button" name="btn1" value="Check Cors Page" onClick="checkCorsSource('cors')">
  </form>
  <p id="txt1" />
</body>
</html>

Tôi đã gặp vấn đề chính xác tương tự trong đó jquery ajax chỉ cho tôi vấn đề cors về các yêu cầu đăng bài trong đó nhận được yêu cầu hoạt động tốt - tôi mệt mỏi với mọi thứ ở trên mà không có kết quả. Tôi có các tiêu đề chính xác trong máy chủ của mình, v.v. Thay đổi sang sử dụng XMLHTTPRequest thay vì jquery đã khắc phục sự cố của tôi ngay lập tức. Cho dù tôi sử dụng phiên bản jquery nào thì nó vẫn không sửa được. Tìm nạp cũng hoạt động mà không gặp sự cố nếu bạn không cần khả năng tương thích ngược của trình duyệt.

        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://mywebsite.com', true)
        xhr.withCredentials = true
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 2) {// do something}
        }
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(json)

Hy vọng rằng điều này sẽ giúp bất kỳ ai khác có cùng vấn đề.

Nếu vì một số lý do trong khi cố gắng thêm tiêu đề hoặc đặt chính sách kiểm soát mà bạn vẫn không nhận được gì, bạn có thể cân nhắc sử dụng apache ProxyPass…

Ví dụ: trong một <VirtualHost>sử dụng SSL, hãy thêm hai chỉ thị sau:

SSLProxyEngine On
ProxyPass /oauth https://remote.tld/oauth

Đảm bảo các mô-đun apache sau được tải (tải chúng bằng a2enmod):

• Ủy quyền
• proxy_connect
• proxy_http

Rõ ràng là bạn sẽ phải thay đổi url yêu cầu AJAX của mình để sử dụng proxy apache…