CORS工作jQuery的罚款，但不是在angularjs [英] CORS working fine in jquery but not in angularjs

问题描述

我Sever的一边是PHP / MySQL的。

我在另一个领域的Web服务使Ajax调用（已启用了哪些访问控制*）

  VAR postUrl =htt​​p://logical-brains.com/elance_clone/test_login.php;
    VAR POSTDATA = {用户名：tanmoy，密码：123456};
 

我试图通过简单的jQuery：

  $阿贾克斯（{
  键入：POST，
  网址：postUrl，
  数据：POSTDATA，
   数据类型：JSON
  跨域：真实，
  成功：功能（数据）{执行console.log（JSON.stringify（数据））; }
}）;
 

它工作得很好，我得到了状态code：200与预期的结果确定

但是，当我被AngularJs尝试，得到如下错误：

  XMLHtt prequest无法加载http://logical-brains.com/elance_clone/test_login.php。请求头字段内容类型不被访问控制 - 允许 - 允许标题。
 

AngularJs code：

  VAR对myApp = angular.module（'对myApp'，[]）;
myApp.config（['$ httpProvider'，函数（$ httpProvider）{
    $ httpProvider.defaults.useXDomain = TRUE;
    删除$ httpProvider.defaults.headers.common ['X-要求-随着'];
}]）;myApp.controller（'MainCtrl'，函数（$范围，$ HTTP）{
    VAR postUrl =htt​​p://logical-brains.com/elance_clone/test_login.php;
    VAR POSTDATA = {用户名：tanmoy，密码：123456};
    $ HTTP（{
        网址：postUrl，
        方法：POST，
        数据：POSTDATA，
         跨域：真
    }）
    。然后（功能（结果）{
            的console.log（成功，结果）;
            $ scope.someVal = JSON.stringify（结果）;
        }，
        功能（响应）{//可选
            的console.log（错误+响应）;
        }
    ）; }; }）;
 

解决方案

我在这个问题。深搜索我得到..
 对于跨域请求，设置内容类型为除应用程序/ x-WWW的形式urlen codeD ，的multipart /表单以外的任何-data 或文本/纯将触发浏览器发送一个preflight OPTIONS请求到服务器。因此，如果服务器不允许它会引发错误。默认情况下角内容类型为应用程序/ JSON 正试图发送一个选项请求。但jQuery的默认值是
应用程序/ x-WWW的形式urlen codeD;字符集= UTF-8 所以你的情况为jQuery是工作和角事实并非如此。试图覆盖角度默认标题。或者允许它在服务端。这里是角示例：

  $ http.post（网址，数据，{
              标题：{
                内容类型：应用程序/ x-WWW的形式urlen codeD;字符集= UTF-8
            }    }）;
 

请参见 http://api.jquery.com/jquery.ajax/ 内容 - 类型细节

My Sever side is php/mysql.

I am making Ajax call in webservice of another domain(Which have access control enabled for *)

    var postUrl = "http://logical-brains.com/elance_clone/test_login.php";
    var postData = {username : "tanmoy" , password : "123456"};

I tried by Simple jQuery :

 $.ajax({
  type: "POST",
  url: postUrl,
  data: postData,
   dataType: "json",
  crossDomain: true,
  success: function(data){ console.log(JSON.stringify(data)); }
}); 

It worked fine and I got Status Code:200 OK with expected result.

BUT When I am trying by AngularJs , getting below Error :

XMLHttpRequest cannot load http://logical-brains.com/elance_clone/test_login.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

AngularJs Code :

var myApp = angular.module('myApp', []);
myApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

myApp.controller('MainCtrl', function($scope, $http) {
    var postUrl = "http://logical-brains.com/elance_clone/test_login.php";
    var postData = {username : "tanmoy" , password : "123456"};
    $http({
        url: postUrl,
        method: "POST",
        data: postData,
         crossDomain: true
    })
    .then(function(result) {
            console.log("Success", result);
            $scope.someVal = JSON.stringify(result);
        }, 
        function(response) { // optional
            console.log("error "+response);
        }
    ); }; });

解决方案

I was in the problem. by deep search i get .. For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server. so if server does not allow it will throw errors. by default angular content type is application/json which is trying to send a OPTION request. but jquery default is application/x-www-form-urlencoded; charset=UTF-8 so in your case for jquery is working and for angular it is not. try to overwrite angular default header . or allow it in server end. here is angular sample:

$http.post(url,data,{
              headers : {
                'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
            }

    });

see http://api.jquery.com/jquery.ajax/ content-type for detail

这篇关于CORS工作jQuery的罚款，但不是在angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！