$ http.post Angular POST

Question

$ http.post Angular POST

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

1

Trying to connect to an API from angular and I get the following error:

   XMLHttpRequest cannot load https://web/api/beta/ruc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

the code is the following ...

  var app = angular.module("app", []);
app.controller("HttpController", function ($scope, $http, $httpParamSerializer) {

    $scope.GetData = function () {
        var data = $httpParamSerializer({
            token : "c664bfba-9969-4e57-ab7a-4532bc81670b-ef3868a6-e62f-45c8-9a36-92db7c21a353",
            ruc : "10178520739"
        });
        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;'
            }
        }

        $http.post('https://web/api/beta/ruc', data, config)
        .then(function (data) {
            $scope.response = "Exito" + data;
        })
        .then(function (data) {
            $scope.response = "Error: " + data;
        });
    };

});

If you want the more detailed example and the web to which I do the API can access link

angularjs post http

asked by DarthSinuhe 25.06.2016 в 23:27

source

3 answers

Doing a button from another button on Android (?) Problem with the use of count in sql

score 3 · Answer 1

Imagine that your Angular application, with address https://web/... , instead of requesting data from the service with address http://localhost:3000 , request data from a service with address https://mail.google.com ... now think about it carefully ... Should you the browser allow the angular application to access that data? ... Would not it be very easy to read the mail of any person without even knowing their credentials?

This is CORS , a characteristic of browsers, which serves to prevent an unauthorized page from accessing data from an X service.

That is the service who authorizes or not other pages to consume this service.

CORS works thanks to the family of HTTP headers that start with Access-Control . There are several degrees of freedom to configure the origin, the HTTP methods (GET, POST, etc), the Content-Type, Headers, etc.

The solution is to enable CORS in the endpoint ( http://localhost:3000 ), in the answers you should see something like that ..

Access-Control-Allow-Origin: *

To enable CORS, as it depends on the server you use, I leave this link that gives a summary of how to do it on the most common servers: link

Eye! This means that any page web will have the possibility to consume this service. So depending on the sensitivity of the information maybe you should put a more specific rule.

score 2 · Answer 2

var config = {
    headers : {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8;'
    }
};
$http.get("controller/getPositionAutority.php,config)
   .success(function (response){
         console.log(response);
})

It is necessary to send the headers to the Api so that it responds to you or as in this example declare the headers of the default response as a JSON object.

score 0 · Answer 3

It's a Cors problem. You have to configure the API to accept these requests. To do this, try to access the Startup.cs file of your API.

1- In the ConfigureServices () method, add the line: services.AddCors ();

2- In the Configure () method add: app.UseCors ( builder = > builder .AllowAnyOrigin () .AllowAnyMethod () .AllowAnyHeader () .AllowCredentials () );