Làm cách nào để gửi yêu cầu POST tên miền chéo qua JavaScript?


568

Làm cách nào để gửi yêu cầu POST tên miền chéo qua JavaScript?

Ghi chú - không nên làm mới trang và tôi cần lấy và phân tích phản hồi sau đó.


Tôi muốn biết một chút về trường hợp sử dụng cho phép bạn thử làm điều này. Bạn có thể vui lòng cho biết một cái gì đó về nó?
mkoeller

Về cơ bản tôi đang làm việc trên một tập lệnh cần gửi một số văn bản từ tệp HTML đến một máy chủ khác để xử lý.
Ido Schacham

3
Bạn có thể thiết lập một proxy thực hiện việc này ở phía máy chủ và chỉ cung cấp kết quả cho tập lệnh của bạn không? Hay nó cần phải là 100% JavaScript?
Sasha Chedygov

Câu trả lời:


382

Cập nhật: Trước khi tiếp tục, mọi người nên đọc và hiểu hướng dẫn html5rocks trên CORS. Nó rất dễ hiểu và rất rõ ràng.

Nếu bạn điều khiển máy chủ được POST, chỉ cần tận dụng "Tiêu chuẩn chia sẻ tài nguyên nguồn gốc chéo" bằng cách đặt các tiêu đề phản hồi trên máy chủ. Câu trả lời này được thảo luận trong các câu trả lời khác trong chủ đề này, nhưng theo tôi thì không rõ ràng lắm.

Nói tóm lại, đây là cách bạn thực hiện POST tên miền chéo từ from.com/1.html đến to.com/postHere.php (sử dụng PHP làm ví dụ). Lưu ý: bạn chỉ cần đặt Access-Control-Allow-Origincho OPTIONScác yêu cầu NON - ví dụ này luôn đặt tất cả các tiêu đề cho một đoạn mã nhỏ hơn.

  1. Trong thiết lập postHere.php như sau:

    switch ($_SERVER['HTTP_ORIGIN']) {
        case 'http://from.com': case 'https://from.com':
        header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
        break;
    }
    

    Điều này cho phép tập lệnh của bạn thực hiện POST, GET và TÙY CHỌN tên miền chéo. Điều này sẽ trở nên rõ ràng khi bạn tiếp tục đọc ...

  2. Thiết lập POST tên miền chéo của bạn từ JS (ví dụ jQuery):

    $.ajax({
        type: 'POST',
        url: 'https://to.com/postHere.php',
        crossDomain: true,
        data: '{"some":"json"}',
        dataType: 'json',
        success: function(responseData, textStatus, jqXHR) {
            var value = responseData.someKey;
        },
        error: function (responseData, textStatus, errorThrown) {
            alert('POST failed.');
        }
    });
    

Khi bạn thực hiện POST ở bước 2, trình duyệt của bạn sẽ gửi phương thức "TÙY CHỌN" đến máy chủ. Đây là một "sniff" của trình duyệt để xem liệu máy chủ có tuyệt vời với bạn POST với nó không. Máy chủ phản hồi với "Kiểm soát truy cập-Cho phép-Xuất xứ" cho trình duyệt biết OK với POST | GET | ORIGIN nếu yêu cầu bắt nguồn từ " http://from.com " hoặc " https://from.com ". Vì máy chủ ổn với nó, trình duyệt sẽ đưa ra yêu cầu thứ 2 (lần này là POST). Đó là một thực tế tốt để khách hàng của bạn đặt loại nội dung mà nó đang gửi - vì vậy bạn cũng cần phải cho phép điều đó.

MDN có một bài viết tuyệt vời về kiểm soát truy cập HTTP , đi sâu vào chi tiết về cách toàn bộ hoạt động của luồng. Theo tài liệu của họ, nó sẽ "hoạt động trong các trình duyệt hỗ trợ XMLHttpRequest chéo trang". Tuy nhiên, điều này hơi sai lệch, vì tôi nghĩ rằng chỉ các trình duyệt hiện đại mới cho phép POST tên miền chéo. Tôi chỉ xác minh điều này hoạt động với safari, chrome, FF 3.6.

Hãy ghi nhớ những điều sau nếu bạn làm điều này:

  1. Máy chủ của bạn sẽ phải xử lý 2 yêu cầu cho mỗi thao tác
  2. Bạn sẽ phải suy nghĩ về ý nghĩa bảo mật. Hãy cẩn thận trước khi làm một cái gì đó như 'Kiểm soát truy cập-Cho phép-Xuất xứ: *'
  3. Điều này sẽ không hoạt động trên trình duyệt di động. Theo kinh nghiệm của tôi, họ không cho phép POST tên miền chéo. Tôi đã thử nghiệm Android, iPad, iPhone
  4. Có một lỗi khá lớn trong FF <3.6, trong đó nếu máy chủ trả về mã phản hồi không 400 VÀ có phần thân phản hồi (ví dụ lỗi xác thực), FF 3.6 sẽ không nhận phần thân phản hồi. Đây là một nỗi đau rất lớn ở mông, vì bạn không thể sử dụng các thực hành REST tốt. Xem lỗi tại đây (được gửi theo jQuery, nhưng tôi đoán đó là lỗi FF - dường như đã được sửa trong FF4).
  5. Luôn trả lại các tiêu đề ở trên, không chỉ trên các yêu cầu TÙY CHỌN. FF cần nó trong phản hồi từ POST.

Nó có thể trả về html chẳng hạn? Tôi cần trả về html và một cái gì đó không hoạt động ...
denis_n

Vâng, bạn sẽ có thể. Chưa bao giờ thử nó tho. Máy chủ của bạn trở lại 200? Ngoài ra, máy chủ của bạn có trả lại các tiêu đề trên các yêu cầu TÙY CHỌN VÀ POST không? Tôi đã cập nhật câu trả lời của tôi với chi tiết hơn về điều này. Đảm bảo rằng máy chủ của bạn cũng phản hồi với tiêu đề loại nội dung chính xác (như văn bản / html). Đề xuất của tôi là sử dụng google chrome, nhấp chuột phải vào trang> kiểm tra phần tử. Nhấp vào tab mạng và xem POST và phản hồi. Nên cung cấp cho bạn thông tin về những gì đang xảy ra.
rynop

Tôi đã thử điều này, nhưng vẫn nhận được 400 Bad Requesttheo OPTIONSyêu cầu. và trong firefoxyêu cầu thứ hai POSTkhông bao giờ được thực hiện. :(
Zain Shaikh

Có cách nào để gọi ra máy cục bộ của bạn trong tuyên bố trường hợp của bạn ở trên không? Hoặc bạn chỉ phải sử dụng dấu * trong trường hợp này cho nguồn gốc cho phép.
Todd Vance

1
cái này được chỉnh sửa lần cuối 4 năm trước - bây giờ nó có hoạt động trên trình duyệt di động không?
frankpinto

121

Nếu bạn điều khiển máy chủ từ xa, có lẽ bạn nên sử dụng CORS, như được mô tả trong câu trả lời này ; nó được hỗ trợ trong IE8 trở lên và tất cả các phiên bản gần đây của FF, GC và Safari. (Nhưng trong IE8 và 9, CORS sẽ không cho phép bạn gửi cookie trong yêu cầu.)

Vì vậy, nếu bạn không điều khiển máy chủ từ xa hoặc nếu bạn phải hỗ trợ IE7 hoặc nếu bạn cần cookie và bạn phải hỗ trợ IE8 / 9, có lẽ bạn sẽ muốn sử dụng kỹ thuật iframe.

  1. Tạo một iframe với một tên duy nhất. (iframes sử dụng một không gian tên toàn cầu cho toàn bộ trình duyệt, vì vậy hãy chọn một tên mà không có trang web nào khác sẽ sử dụng.)
  2. Xây dựng một biểu mẫu với các đầu vào ẩn, nhắm mục tiêu iframe.
  3. Gửi mẫu đơn.

Đây là mã mẫu; Tôi đã thử nghiệm nó trên IE6, IE7, IE8, IE9, FF4, GC11, S5.

function crossDomainPost() {
  // Add the iframe with a unique name
  var iframe = document.createElement("iframe");
  var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;

  // construct a form with hidden inputs, targeting the iframe
  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://INSERT_YOUR_URL_HERE";
  form.method = "POST";

  // repeat for each parameter
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
  input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
}

Coi chừng! Bạn sẽ không thể đọc trực tiếp phản hồi của POST, vì iframe tồn tại trên một tên miền riêng. Các khung không được phép liên lạc với nhau từ các miền khác nhau; đây là chính sách cùng nguồn gốc .

Nếu bạn điều khiển máy chủ từ xa nhưng bạn không thể sử dụng CORS (ví dụ: vì bạn đang sử dụng IE8 / IE9 và bạn cần sử dụng cookie), có nhiều cách để khắc phục chính sách cùng nguồn gốc, ví dụ như bằng cách sử dụng window.postMessagevà / hoặc một trong số các thư viện cho phép bạn gửi tin nhắn khung chéo tên miền trong các trình duyệt cũ hơn:

Nếu bạn không điều khiển máy chủ từ xa, thì bạn không thể đọc phản hồi của POST, period. Nó sẽ gây ra vấn đề an ninh khác.


2
Bạn sẽ cần đặt form.target thành một cái gì đó, nếu không trình duyệt sẽ điều hướng khỏi trang web của bạn đến URL hành động của biểu mẫu. Hơn nữa, chuỗi cần phải là duy nhất; nếu có các khung hoặc cửa sổ khác sử dụng cùng tên, biểu mẫu có thể đăng lên cửa sổ đó thay vì iframe của bạn. Nhưng nó phải độc đáo như thế nào? Có lẽ là không. Các tỷ lệ cược của clobbering là khá nhỏ. nhún vai
Dan Fabulich

1
@Nawaz Như tôi đã nói trong câu trả lời của mình, bạn sẽ phải thực hiện giao tiếp giữa các tên miền chéo để có kết quả trong trang web của mình. Nó yêu cầu bạn điều khiển máy chủ web từ xa để bạn có thể sửa đổi phản hồi của nó để cho phép liên lạc với trang web của bạn. (Đối với một điều, máy chủ sẽ cần trả lời bằng HTML; nếu máy chủ trả lời bằng XML thô, thì nó không thể thực hiện giao tiếp giữa các khung.)
Dan Fabulich

1
+1 - đây là giải pháp tốt nhất tôi tìm thấy nếu bạn không có quyền truy cập vào máy chủ
James Long

1
@VojtechB Không, đó sẽ là lỗ hổng bảo mật.
Dan Fabulich

1
@Andrus Bạn có thể đọc kết quả của POST, nhưng chỉ khi bạn điều khiển máy chủ! Xem trong câu trả lời đó, nó nói "làm X trên người gửi [máy khách], làm Y trên máy thu [máy chủ]." Nếu bạn không điều khiển máy thu / máy chủ, bạn không thể làm Y và vì vậy bạn không thể đọc kết quả của POST.
Dan Fabulich

48
  1. Tạo một iFrame,
  2. đặt một biểu mẫu trong đó với các đầu vào ẩn,
  3. đặt hành động của biểu mẫu thành URL,
  4. Thêm iframe vào tài liệu
  5. nộp mẫu

Mã giả

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 // create hidden inputs, add them
 // not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

Bạn có thể muốn tạo kiểu cho iframe, được ẩn và định vị tuyệt đối. Không chắc chắn việc đăng trang chéo sẽ được trình duyệt cho phép, nhưng nếu vậy, đây là cách thực hiện.


4
Trên thực tế, điều này hơi không chính xác, vì ifr.appendChild (frm); sẽ không làm việc. iframe là một tham chiếu đến một đối tượng cửa sổ và phương thức appendChild không tồn tại cho nó. Bạn sẽ cần lấy nút tài liệu trong iframe trước. Điều này đòi hỏi phát hiện tính năng để làm việc trên các trình duyệt.
Rakesh Pai

Cảm ơn. Tìm thấy những liên kết hữu ích liên quan đến vấn đề này: bindzus.wordpress.com/2007/12/24/... developer.apple.com/internet/webcontent/iframe.html
Ido Schacham

19
Vấn đề! Phản hồi nhận được trong iframe nằm ở một tên miền khác, vì vậy cửa sổ chính không có quyền truy cập vào nó, iframe cũng không có quyền truy cập vào cửa sổ chính. Vì vậy, giải pháp này chỉ có vẻ tốt khi thực hiện POST, nhưng bạn không thể phân tích phản hồi sau đó :(
Ido Schacham

2
Hãy thử đặt một tải trong thẻ body của phản hồi cho hàm JavaScript gọi hàm trong chuỗi cha mẹ bằng chuỗi phản hồi.
Lou Franco

Câu trả lời này không hiệu quả với tôi; Tôi đã đăng biến thể của riêng tôi dưới đây.
Dan Fabulich

24

Giữ cho nó đơn giản:

  1. POST tên miền chéo:
    sử dụngcrossDomain: true,

  2. không nên làm mới trang:
    Không, nó sẽ không làm mới trang vìcuộc gọi lạisuccesshoặcerrorasync sẽ được gọi khi máy chủ gửi lại phản hồi.


Kịch bản ví dụ:

$.ajax({
        type: "POST",
        url: "http://www.yoururl.com/",
        crossDomain: true,
        data: 'param1=value1&param2=value2',
        success: function (data) {
            // do something with server response data
        },
        error: function (err) {
            // handle your error logic here
        }
    });

8
crossDomain: truekỳ quặc hoàn toàn không có gì để làm với các yêu cầu tên miền thực sự. Nếu yêu cầu là tên miền chéo, jquery đặt điều này thành đúng tự động.
Kevin B

16

Nếu bạn có quyền truy cập vào tất cả các máy chủ liên quan, hãy đặt phần sau vào tiêu đề trả lời cho trang được yêu cầu trong tên miền khác:

PHP:

header('Access-Control-Allow-Origin: *');

Ví dụ: trong mã xmlrpc.php của Drupal, bạn sẽ làm điều này:

function xmlrpc_server_output($xml) {
    $xml = '<?xml version="1.0"?>'."\n". $xml;
    header('Connection: close');
    header('Content-Length: '. strlen($xml));
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/x-www-form-urlencoded');
    header('Date: '. date('r'));
    // $xml = str_replace("\n", " ", $xml); 

    echo $xml;
    exit;
}

Điều này có thể tạo ra một vấn đề bảo mật và bạn nên đảm bảo rằng bạn thực hiện các biện pháp thích hợp để xác minh yêu cầu.



6
  1. Tạo hai iframe ẩn (thêm "display: none;" vào kiểu css). Đặt iframe thứ hai của bạn trỏ đến một cái gì đó trên tên miền của riêng bạn.

  2. Tạo một biểu mẫu ẩn, đặt phương thức của nó thành "đăng" với target = iframe đầu tiên của bạn và tùy ý đặt enctype thành "nhiều dữ liệu / biểu mẫu dữ liệu" (Tôi nghĩ rằng bạn muốn thực hiện POST vì bạn muốn gửi dữ liệu nhiều phần như hình ảnh ?)

  3. Khi đã sẵn sàng, hãy tạo biểu mẫu gửi () POST.

  4. Nếu bạn có thể khiến tên miền khác trả lại javascript sẽ thực hiện Giao tiếp tên miền chéo với Iframes ( http://softwareas.com/cross-domain-cransication-with-iframes ) thì bạn rất may mắn và bạn có thể nắm bắt được phản hồi cũng.

Tất nhiên, nếu bạn muốn sử dụng máy chủ của mình làm proxy, bạn có thể tránh tất cả điều này. Chỉ cần gửi biểu mẫu đến máy chủ của riêng bạn, nó sẽ ủy quyền yêu cầu đến máy chủ khác (giả sử máy chủ khác không được thiết lập để nhận thấy sự khác biệt IP), nhận phản hồi và trả lại bất cứ điều gì bạn muốn.


6

Một điều quan trọng hơn cần lưu ý !!! Trong ví dụ trên, nó mô tả cách sử dụng

$.ajax({
    type     : 'POST',
    dataType : 'json', 
    url      : 'another-remote-server',
    ...
});

JQuery 1.6 trở xuống có lỗi với XHR tên miền chéo. Theo Fireorms, không có yêu cầu nào ngoại trừ TÙY CHỌN được gửi. Không có bài đăng. Ở tất cả.

Đã dành 5 giờ để kiểm tra / điều chỉnh mã của tôi. Thêm rất nhiều tiêu đề trên máy chủ từ xa (script). Không có tác dụng. Nhưng sau đó, tôi đã cập nhật lib JQuery lên 1.6.4 và mọi thứ hoạt động như một nét quyến rũ.


Whoopps, không có trong Opera 10.61. Quyết định cuối cùng của tôi để làm điều này là sử dụng proxy PHP trên miền của tôi.
BasTaller

Bạn đã sử dụng proxy PHP như thế nào? Bạn có thể hướng dẫn tôi về điều đó?
Zoran777

xem các câu trả lời dưới đây, ví dụ bởi Ivan Durst
BasTaller

5

Nếu bạn muốn làm điều này trong môi trường MVC của ASP.net với JQuery AJAX, hãy làm theo các bước sau: (đây là tóm tắt về giải pháp được cung cấp tại chuỗi này )

Giả sử rằng "caller.com" (có thể là bất kỳ trang web nào) cần đăng lên "server.com" (một ứng dụng ASP.net MVC)

  1. Trên Web.config của ứng dụng "server.com", thêm phần sau:

      <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
              <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
          </customHeaders>
      </httpProtocol>
  2. Trên "server.com", chúng tôi sẽ có hành động sau trên bộ điều khiển (được gọi là "Trang chủ") mà chúng tôi sẽ đăng:

    [HttpPost]
    public JsonResult Save()
    {
        //Handle the post data...
    
        return Json(
            new
            {
                IsSuccess = true
            });
    }
  3. Sau đó, từ "caller.com", đăng dữ liệu từ một biểu mẫu (với id html "formId") lên "server.com" như sau:

    $.ajax({
            type: "POST",
            url: "http://www.server.com/home/save",
            dataType: 'json',
            crossDomain: true,
            data: $(formId).serialize(),
            success: function (jsonResult) {
               //do what ever with the reply
            },
            error: function (jqXHR, textStatus) {
                //handle error
            }
        });

4

Có một cách nữa (sử dụng tính năng html5). Bạn có thể sử dụng proxy iframe được lưu trữ trên tên miền khác đó, bạn gửi tin nhắn bằng postMessage đến iframe đó, iframe đó có thể thực hiện yêu cầu POST (trên cùng một tên miền) và postMessage trở lại với cửa sổ cha mẹ.

phụ huynh trên sender.com

var win = $('iframe')[0].contentWindow

function get(event) {
    if (event.origin === "http://reciver.com") {
        // event.data is response from POST
    }
}

if (window.addEventListener){
    addEventListener("message", get, false)
} else {
    attachEvent("onmessage", get)
}
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");

iframe trên reciver.com

function listener(event) {
    if (event.origin === "http://sender.com") {
        var data = JSON.parse(event.data);
        $.post(data.url, data.data, function(reponse) {
            window.parent.postMessage(reponse, "*");
        });
    }
}
// don't know if we can use jQuery here
if (window.addEventListener){
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}

Có câu hỏi liên quan trong stackoverflow.com/questions/38940932/ . Có thể tạo một số plugin hoặc chức năng chung dựa trên mẫu của bạn?
Andrus

@Andrus có lẽ một cái gì đó như thế này gist.github.com/jcubic/26f806800abae0db9a0dfccd88cf6f3c
jcubic

Mã này yêu cầu sửa đổi trang nhận. Làm thế nào để đọc phản hồi nếu các trang người nhận không thể sửa đổi?
Andrus

@Andrus bạn không cần phải có quyền truy cập iframe.com để gửi yêu cầu ajax ở đó. Không có iframe sẽ không có yêu cầu.
jcubic

3

Cấp độ cao .... Bạn cần phải có một thiết lập tên trên máy chủ của mình để other-serve.your-server.com trỏ đến other-server.com.

Trang của bạn tự động tạo một iframe vô hình, hoạt động như vận chuyển của bạn đến other-server.com. Sau đó, bạn phải liên lạc qua JS từ trang của bạn đến other-server.com và có các cuộc gọi lại để trả lại dữ liệu cho trang của bạn.

Có thể nhưng cần có sự phối hợp từ your-server.com và other-server.com


Thậm chí không nghĩ đến việc sử dụng CNAME để chuyển hướng. Cuộc gọi tốt Tôi vẫn chưa thử điều này nhưng tôi cho rằng CNAME sẽ lừa trình duyệt nghĩ rằng nó tương tác với cùng một trang? Tôi sẽ sử dụng nó để đăng lên Amazon S3 vì vậy tôi hy vọng điều này sẽ hiệu quả.
SpencerElliott

1
Tôi không thấy làm thế nào điều này sẽ giải quyết bất cứ điều gì. vượt qua một tên miền phụ khác có cùng các vấn đề như vượt qua một tên miền khác.
Bạch tuộc


2

Đây là một câu hỏi cũ, nhưng một số công nghệ mới có thể giúp đỡ ai đó.

Nếu bạn có quyền truy cập quản trị vào máy chủ khác thì bạn có thể sử dụng dự án Forge mã nguồn mở để thực hiện POST tên miền chéo của mình. Forge cung cấp trình bao bọc JavaScript XmlHttpRequest tên miền chéo, tận dụng API ổ cắm thô của Flash. POST thậm chí có thể được thực hiện qua TLS.

Lý do bạn cần quyền truy cập quản trị vào máy chủ mà bạn đang ĐĂNG là vì bạn phải cung cấp chính sách tên miền chéo cho phép truy cập từ tên miền của bạn.

http://github.com/digitalbazaar/forge


2

Tôi biết đây là một câu hỏi cũ, nhưng tôi muốn chia sẻ cách tiếp cận của mình. Tôi sử dụng cURL như một proxy, rất dễ dàng và nhất quán. Tạo một trang php có tên là submit.php và thêm đoạn mã sau:

<?

function post($url, $data) {
$header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded");
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($curl);
curl_close($curl);
return $response;
}

$url = "your cross domain request here";
$data = $_SERVER["QUERY_STRING"];
echo(post($url, $data));

Sau đó, trong js của bạn (jQuery ở đây):

$.ajax({
type: 'POST',
url: 'submit.php',
crossDomain: true,
data: '{"some":"json"}',
dataType: 'json',
success: function(responseData, textStatus, jqXHR) {
    var value = responseData.someKey;
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});

1

Nếu có thể với bảng tùy chỉnh YQL + JS XHR, hãy xem: http://developer.yahoo.com/yql/guide/index.html

Tôi sử dụng nó để thực hiện một số thao tác html (js) phía máy khách, hoạt động tốt (Tôi có trình phát âm thanh đầy đủ, với tìm kiếm trên internet / danh sách phát / lời bài hát / thông tin fm cuối cùng, tất cả ứng dụng khách js + YQL)


1

CORS là dành cho bạn. CORS là "Chia sẻ tài nguyên nguồn gốc chéo", là một cách để gửi yêu cầu tên miền chéo. Bây giờ, cả XMLHttpRequest2 và Fetch API đều hỗ trợ CORS và nó có thể gửi cả yêu cầu POST và GET

Nhưng nó có giới hạn của nó. Máy chủ cần xác nhận quyền truy cập cụ thể Kiểm soát truy cập-Cho phép-Xuất xứ và không thể được đặt thành '*'.

Và nếu bạn muốn bất kỳ nguồn gốc nào có thể gửi yêu cầu cho bạn, bạn cần JSONP (cũng cần đặt Access-Control-Allow-Origin , nhưng có thể là '*')

Đối với nhiều cách yêu cầu nếu bạn không biết cách lựa chọn, tôi nghĩ bạn cần một thành phần chức năng đầy đủ để làm điều đó. Hãy để tôi giới thiệu một thành phần đơn giản https://github.com/Joker-Jelly/catta


Nếu bạn đang sử dụng trình duyệt hiện đại (> IE9, Chrome, FF, Edge, v.v.), Rất khuyên bạn nên sử dụng một thành phần đơn giản nhưng đẹp mắt https://github.com/Joker-Jelly/catta . Nó không phụ thuộc, Ít hơn hơn 3KB và nó hỗ trợ Fetch, AJAX và JSONP với cùng các tùy chọn và cú pháp mẫu chết người.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Nó cũng hỗ trợ tất cả các cách để nhập vào dự án của bạn, như mô-đun ES6, CommonJS và thậm chí <script>trong HTML.


1

Nếu bạn có quyền truy cập vào máy chủ tên miền chéo và không muốn thực hiện bất kỳ thay đổi mã nào ở phía máy chủ, bạn có thể sử dụng thư viện có tên - 'xdomain'.

Làm thế nào nó hoạt động:

Bước 1: máy chủ 1: bao gồm thư viện xdomain và định cấu hình tên miền chéo làm nô lệ:

<script src="js/xdomain.min.js" slave="https://crossdomain_server/proxy.html"></script>

Bước 2: trên máy chủ tên miền chéo, tạo tệp proxy.html và bao gồm máy chủ 1 làm chủ:

proxy.html:
<!DOCTYPE HTML>
<script src="js/xdomain.min.js"></script>
<script>
  xdomain.masters({
    "https://server1" : '*'
  });
</script>

Bước 3:

Bây giờ, bạn có thể thực hiện cuộc gọi AJAX đến proxy.html làm điểm cuối từ máy chủ1. Đây là bỏ qua yêu cầu CORS. Thư viện sử dụng nội bộ giải pháp iframe hoạt động với Thông tin xác thực và tất cả các phương thức có thể: GET, POST, v.v.

Truy vấn mã ajax:

$.ajax({
        url: 'https://crossdomain_server/proxy.html',
        type: "POST",
        data: JSON.stringify(_data),
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    })
    .done(_success)
    .fail(_failed)
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.