AngularJS和跨域POST [英] AngularJS and Cross Domain POST

问题描述

我有关于与HTTP Authorization头CORS请求的问题：

在我看来，该Web浏览器不发送与POST请求授权头，有没有解决这个办法？

下面是我的角code：

  VAR应用= angular.module（应用，[]）
    的.config（['$ httpProvider'，函数（$ httpProvider）{
        $ httpProvider.defaults.useXDomain = TRUE;
        删除$ httpProvider.defaults.headers.common ['X-要求-随着'];
    }]）;    app.controller（'CTRL'，函数（$范围，$ HTTP）{
        $ scope.insert =功能（）{            $ http.post（'http://my.api.com/Insert'，
                {
                    标题：{
                        '授权'：'基本dGVzdDp0ZXN0'，
                        内容类型：应用程序/ x-WWW的形式urlen codeD
                    }，
                    数据：{
                        code'：'测试数据
                    }，
                    withCredentials：真
                }）;
        };
    }）;
 

在服务器端我在web.config中有此

 ＆LT; httpProtocol＆GT;
  ＆LT; customHeaders＆GT;
    ＆LT;添加名称=访问控制允许来源VALUE =*/＆GT;
    ＆LT;添加名称=访问控制 - 允许 - 头VALUE =缓存控制，语用，产地，授权，内容类型，X-要求，用/＆GT;
    ＆LT;添加名称=访问控制允许的方法VALUE =GET，POST，PUT，DELETE，OPTIONS/＆GT;
    ＆LT;添加名称=访问控制允许的凭据VALUE =真/＆GT;
  ＆LT; / customHeaders＆GT;
＆LT; / httpProtocol＆GT;
 

解决方案

您正在使用 $ http.post 不正确。第二个参数是在的数据的您需要发送到服务器，你可以不设置这样的标题。根据你的情况，它会发送的整个对象的
为 JSON有效载荷的

试试这个：

  $ HTTP（{
       网址：'HTTP：//my.api.com/Insert'，
       方法：POST，
       标题：{
                  '授权'：'基本dGVzdDp0ZXN0'，
                  内容类型：应用程序/ x-WWW的形式urlen codeD
       }，
       数据：{
              code'：'测试数据
       }
  }）;
 

i have a question regarding CORS requests with HTTP Authorization header:

It seems to me that web browser is not sending Authorization header with POST request, is there any way around this?

Here is my Angular code:

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

    app.controller('ctrl', function ($scope, $http) {
        $scope.insert = function () {

            $http.post('http://my.api.com/Insert',
                {
                    headers: {
                        'Authorization': 'Basic dGVzdDp0ZXN0',
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        'Code': 'test data'
                    },
                    withCredentials: true
                });
        };
    });

On server side i have this in my web.config

<httpProtocol >
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

解决方案

You're using the $http.post incorrectly. The second parameter is the data you need to send to server, you cannot set headers like this. In your case, it will send the whole object as JSON payload

Try this:

$http({
       url:'http://my.api.com/Insert',
       method:"POST",
       headers: {
                  'Authorization': 'Basic dGVzdDp0ZXN0',
                  'Content-Type': 'application/x-www-form-urlencoded'
       },
       data: {
              'Code': 'test data'
       }
  });

这篇关于AngularJS和跨域POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！