HTTP post in Angular

Question

I am trying to access a web service that receives in Header "Device" and in Body "User and Password", it returns me json in this format:

{
  "IdUsuario": 2,
  "Usuario": "Fulanu",
  "Token": "1f7b87d7" 
}

Trying to do it at the angle, follow my code:

$scope.logar = function (){
  var data = ({Usuario: "usu",Senha:"sen"});
  var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;',
                'data': {Device:"1"}
            }
        }

  $http.post("URL", data,config).success(function(data, status){
    console.log(data);
  });
};

This is returning me following error:

Xmlhttprequest cannot load . Response to preflight request doesn’t pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'null' is therefore not allowed access.

Answer 1

Personal thank you,

Although it didn’t work out in the ways you suggested.

solved on my own server (MVC Webapi) with following code in Webapiconfig

 var cors = new EnableCorsAttribute(origins:"*", headers:"*", methods:"*");
        config.EnableCors(cors);

Also in sending my date looked like this:

 var data = "Usuario=fulanu&Senha=senha";

Answer 2

You’re trying to access a service from a local file. This is not possible by the same origin policy unless you enable server-side access by sending Access-Control-Allow-Origin: * us headers.

In computing, the same origin policy is an important concept in the web application security model. This policy allows scripts to be executed on pages that originate from the same site - a combination of schema, host name and port number - to access each other’s DOM without specific restrictions, but prevents access to DOM on different websites. [1] This policy also applies to Xmlhttprequests unless the server provides an Access-Control-Allow-Origin (CORS) header. Notably Websockets are not subject to same origin policy.

But for development purposes on Chrome you can start with the following parameters:

--allow-file-access-from-files --disable-web-security

Windows will look similar to the following:

C:\Users\SEU USUARIO\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security

Reference: CORS, Cordova, Angularjs $http and file://Confusion

Answer 3

I recently went through the same problem while trying to get data from an external API that blocked my requests with the same error as yours. What I did to solve the problem was to create a configuration for all $http services through a interceptor (which is a service that "intercepts" every request and applies the configuration before it is executed). See:

angular
.module('seuModulo')
.config('InterceptorConfig', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
})

See if it solves your problem.