HTTP基本身份验证适用于jQuery POST请求,但不适用于Angular

时间:2016-07-01 21:50:55

标签: javascript angularjs post basic-authentication

更新:两件事:一,我是从两个不同的域发出jQuery和Angular的POST请求。我created a jsfiddle来测试来自同一域的两个请求,它们都有效。我试图使小提琴非常通用,以便您可以交换配置值并使用基本的http身份验证测试XML POST请求,以用于您需要的任何站点。另一件事是,使用Angular $ http服务,Data-Type标头会导致以下错误:Request header field Data-Type is not allowed by Access-Control-Allow-Headers in preflight response。所以我删除了那个标题。我仍然在解决为什么请求在一个域而不是另一个域中运行的原因。一旦我弄清楚了,我会更新并标记为已解决。 /更新

以下基本身份验证的jQuery POST请求按预期工作:

var mapstory = {
  xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>',
  url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher',
  auth: authToken //base64 encoded string of 'user:password'
};

$.ajax({
  url: mapstory.url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + mapstory.auth);
  },
  type: 'POST',
  contentType: 'text/html',
  dataType: 'xml',
  processData: false,
  data: mapstory.xml,
  success: function(data) {
    console.log(data);
  }
});

以下是回复标题:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin,Content-Type,Accept, Authorization, x-requested-with
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Connection: keep-alive
Content-Length: 0
Date: Fri, 01 Jul 2016 21:06:50 GMT
Server: nginx
access-control-allow-origin: http://localhost:8888

然而,AngularJS(v1.2.21)中的以下内容并不起作用:

var mapstory = {
  xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>',
  url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher',
  auth: authToken //base64 encoded string of 'user:password'
};

var config = {
  withCredentials: true
};

config.headers = {
  'Authorization': 'Basic ' + mapstory.auth,
  'Content-Type': 'text/html',
  'Data-Type': 'xml'
};

$http.post(mapstory.url, mapstory.xml, config)
.success(function(data) {
  console.log(data);
});

我从此请求收到以下响应标头:

Content-Language: en
Content-Type: text/xml;charset=UTF-8
Date: Fri, 01 Jul 2016 20:52:13 GMT
Server: WSGIServer/0.1 Python/2.7.11
Vary: Accept-Language, Cookie
X-Frame-Options: SAMEORIGIN

我从上面的Angular请求中获得了有效的XML响应,但响应表明该请求未经授权。

我尝试使用Content-Type替换application/xml值,但这对结果没有任何影响。

我已经阅读了Angular $ http文档并找到了许多其他资源,例如描述类似问题的this Stack Overflow question。建议的解决方案是删除X-Requested-With默认标头。在1.2以上的Angular版本中,这一步显然不是必需的(here's对于Angular的Github来说是一个封闭的问题),但我无论如何都尝试过。没有运气。

对此的任何指导都会很精彩。非常感谢非常花时间阅读并考虑这个!

1 个答案:

答案 0 :(得分:-1)

看起来服务器不会将angular识别为同一域应用程序。因此,您必须做的是在Web服务器头中包含值:access-control-allow-origin:*以允许来自“外部”域的请求。