Làm thế nào để gửi dữ liệu JSON để REST Webservice trong AngularJS

Question

Làm thế nào để gửi dữ liệu JSON để web phục vụ qua AngularJS đây là đoạn mã

.controller('MessagePostCtrl', function($scope, $http) { 
    $scope.postMessage = function() { 
     var msg = document.getElementById('message').value; 
     var msgdata = { 
       message : msg 
      }; 
     var res = $http.post('http://<domain-name>/messenger/api/posts/savePost',msgdata); 
     res.success(function(data, status, headers, config) { 
      console.log(data); 
     }); 
    } 
}) 

OPTIONS http: /// sứ/api/bài viết/savePost
ionic.bundle.js: 16.185 (chức năng ẩn danh) ionic.bundle.js: 16.185 sendReq ionic.bundle.js: 15.979 ionic.bundle.js serverRequest: 15.712 ionic.bundle.js wrappedCallback: 19.197 wrappedCallback ionic.bundle.js: 19197 (chức năng ẩn danh) ionic.bundle.js: 19283 $ Eval ionic.bundle.js: 20326 Phạm vi. $ Digest ionic.bundle.js: 20138 Phạm vi. $ Áp dụng ionic.bundle.js: 20430 (chức năng ẩn danh) ionic.bundle.js: 43025 (chức năng ẩn danh) ionic.bundle.js: 10478 forEach ionic.bundle.js: 7950 eventHandler ionic.bundle.js: 10477 triggerMouseEvent ionic.bundle.js: 2648 tapClick ionic.bundle.js: 2637 tapMouseUp ionic.bundle.js: 2707

XMLHttpRequest không thể tải http: /// messenger/api/posts/savePost. Mã trạng thái HTTP không hợp lệ 404

Nhưng khi tôi xóa msgdata khỏi phương thức $ http.post, mọi thứ đều hoạt động tốt. bất cứ ai có thể cho tôi biết nơi vấn đề là nếu không hướng dẫn cho tôi làm thế nào để gửi dữ liệu JSON để web-dịch vụ

Thanks for the help

**Edited: 
The Issue was with the CORS, Im using codeigniter REST Controller for web-services. 
Modified the headers. If anyone has the same issue add the below header in the construct 

header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE"); 
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method"); 
if ("OPTIONS" === $_SERVER['REQUEST_METHOD']) { 
die(); 
} 
Thanks to Linial for the break-through, telling me where the issue is.** 

Answer 1

Okay,

Bạn lẫn lộn vài điều:

Trước tiên, tôi có thể thấy yêu cầu của bạn đã thay đổi từ POST thành OPTIONS.

Tại sao?

Bạn đang thực hiện yêu cầu HTTP Cross-site (CORS), điều đó có nghĩa là WebApp và API phụ trợ của bạn không nằm trong cùng một miền.

Điều gì xảy ra trực tiếp là yêu cầu đang được xem trước.

yêu cầu Preflighted: bởi Mozilla MDN:

Nó sử dụng các phương pháp khác hơn GET, HEAD hay POST. Ngoài ra, nếu POST được sử dụng để gửi dữ liệu yêu cầu với Loại nội dung khác với ứng dụng/x-www-form-urlencoded, nhiều phần/biểu mẫu dữ liệu hoặc văn bản/đồng bằng, ví dụ: nếu yêu cầu POST gửi một tải trọng XML đến máy chủ bằng cách sử dụng ứng dụng/xml hoặc văn bản/xml, thì yêu cầu được xem trước.

Có nghĩa là, bất kỳ yêu cầu bên cạnh GET, HEAD hoặc POST sẽ được thay đổi để OPTIONS VÀ: Cũng POST nếu được sử dụng để gửi dữ liệu với Content-Type khác hơn application/x-www-form-urlencoded, multipart/form-data, or text/plain

bây giờ hiểu, nhưng phải làm gì? Tôi phải thực hiện yêu cầu POST!

Bạn không có nhiều tùy chọn, vì CORS được xác định trên máy chủ.

Nhưng trên máy khách, bạn có thể làm như vậy (Ví dụ): thay đổi kiểu mã hóa trong góc như vậy: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

HOẶC

Đặt máy chủ của bạn để phê duyệt CORS như vậy:

Access-Control-Allow-Headers: Content-Type \\ This will allow you to set content type header in the client. 

Access-Control-Allow-Methods: GET, POST, OPTIONS \\ This will allow you to send GET POST and OPTIONS, which is necessary because of preflighted requests. 

Access-Control-Allow-Origin: * \\ This will allow anyone to perform CORS requests. 

Chúc may mắn!