Gọi API bên ngoài bằng Javascript

Question

Tôi cần thực hiện yêu cầu POST tới máy chủ bên ngoài từ trang web của mình bằng Javascript. Cơ thể và phản ứng đều là json. Tôi không thể tìm ra cách thực hiện cuộc gọi này hoặc những công cụ để sử dụng. Làm thế nào để thực hiện cuộc gọi này?

Đây là những gì tôi đã cho đến nay sử dụng jQuery và ajax:

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}'; 
var response = $.ajax({ 
      url: "http://" + environment + "/vizportal/api/web/v1/getViews", 
      method: "post", 
      dataType:'json', 
      data: JSON.stringify(body), 
      headers: { 
      'Content-Type': 'text/plain', 
      'X-XSRF-TOKEN' : XSRFToken, 
      'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken 
      }, 
      success:function(response){ 
       alert("success"); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      } 
     }); 

Người ta ném một cảnh báo rằng chỉ cần nói "Tình trạng:" và "Lỗi:"

Giao diện điều khiển nói này "XMLHttpRequest không thể tải http://[domain]/vizportal/api/web/v1/getViews. Không có tiêu đề 'Access-Control-Allow-Origin' trên tài nguyên được yêu cầu. Vì vậy, không thể cho phép xuất xứ 'http://[domain]'. Phản hồi có mã trạng thái HTTP 405. "

Answer 1

Bạn có phải là chủ sở hữu của các điểm đến của cuộc gọi? Nếu có, hãy triển khai các tiêu đề CORS ở phía máy chủ.

Nếu không, bạn có thể fiddle bằng cách sử dụng JSONP (nó bỏ qua CORS) hoặc thậm chí bạn có thể triển khai proxy phía máy chủ mà bạn sở hữu để định tuyến các yêu cầu bên ngoài (và tất nhiên, triển khai CORS ở đó).

Xem bài viết về CORS trong MDN nếu bạn muốn biết thêm thông tin: HTTP access control (CORS) on MDN

Answer 2

Bạn có thể sử dụng JQUERY và AjAX. Bạn có thể gửi/nhận thông tin thông tin đến/từ API của mình bằng cách đăng hoặc nhận phương thức.

Nó sẽ là một cái gì đó như thế:

$("#ButtonForm").click(function(){ 
$.ajax({ 
     url:(Your url), 
     dataType:'json', 
     type: 'post', 
     data: yourForm.serialize(), 
     success:function(response){ 
       ** If yout API returns something, you're going to proccess the data here. 
     } 
    }); 
}); 

Ajax: http://api.jquery.com/jquery.ajax/

Answer 3

Nếu bạn sử dụng jquery, sử dụng .post, hoặc .ajax, nộp

$.post(url, data, callbackSuccess, callbackError);

thêm về các phương pháp này tại đây http://api.jquery.com/jquery.ajax/

dụ:

var url = 'http://example.com/path/endpoint'; 

$.post(url, {name: 'Darlan', lastname: 'Mendonça'}, function(response){ 
    // callback success 
}, function(response) { 
    // callback error 
}); 

Answer 4

Bạn đang vi phạm cái gọi là cùng nguồn gốc chính sách ở đây. Hầu hết các trình duyệt không cho phép tập lệnh truy cập các URL không có cùng tên máy chủ và cổng so với trang có tập lệnh. Đây là một chính sách bảo mật rất nghiêm ngặt và thường rất khó khắc phục ngay cả đối với mục đích thử nghiệm.

Theo truyền thống, cách dễ nhất để thực hiện việc này là sử dụng trang web của riêng bạn làm proxy và chuyển tiếp yêu cầu thông qua trang web đến máy chủ bên ngoài. Nhưng nếu bạn không có đủ quyền kiểm soát trên trang web của riêng mình để thực hiện giải pháp như vậy, mọi thứ trở nên phức tạp hơn. Nếu bạn tìm kiếm trên Internet với "cùng một nguồn gốc-chính sách", bạn sẽ tìm thấy rất nhiều cuộc thảo luận về chủ đề và các ý tưởng khác để giải quyết nó.

Đề xuất đầu tiên của tôi là kiểm tra "Access-Control-Allow-Origin" mà thông báo lỗi của bạn đề cập đến, mặc dù bản thân tôi không quen với nó. Nó có liên quan đến một chương trình mới gọi là CORS đã được thêm vào các khuyến nghị W3C khá gần đây (2014), và dường như có sự hỗ trợ rộng rãi trong các phiên bản mới nhất của nhiều trình duyệt. Có lẽ các nhà phát triển cuối cùng cũng nhận được một số công cụ để làm việc với vấn đề khó chịu này.

Answer 5

Khi bạn muốn sử dụng cuộc gọi ajax miền khác thì bạn cần phải sử dụng kiểu dữ liệu JSONP cho phép trình duyệt thực hiện yêu cầu miền chéo.

Đây là tài liệu hơn cho JSONP: https://learn.jquery.com/ajax/working-with-jsonp/

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}'; 
var response = $.ajax({ 
      url: "http://" + environment + "/vizportal/api/web/v1/getViews", 
      method: "post", 
      dataType:'jsonp', 
      data: JSON.stringify(body), 
      headers: { 
      'Content-Type': 'text/plain', 
      'X-XSRF-TOKEN' : XSRFToken, 
      'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken 
      }, 
      success:function(response){ 
       alert("success"); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      } 
     });