【发布时间】：2015-02-23 23:09:08
【问题描述】：
首先，我不确定如何正确命名这个问题或如何描述问题的“足够”以使其易于理解。
无论如何，我已经运行了一个 wordpress 安装作为博客的后端。它安装了一个 json-api-plugin。为此，我添加了一个基于 Angular 的前端，它使用 jQuery 的 $.ajax() 将 HTTP 请求发送到后端。
现在，它在 Chrome 和 Firefox 中运行良好（没试过 IE，我在 Mac 上）。但是在 Safari 中我遇到了一些问题。似乎有些请求有效，而另一些则无效。
例如，对http://api.walander.se/json/get_posts/?page=1 的请求在所有三种浏览器中都能完美运行（这也是我在 Safari 中唯一使用过的浏览器）。同时，对 http://api.walander.se/json/get_category_index 的请求在 Chrome 和 Firefox 中有效，但在 Safari 中失败。
Safaris 检查器工具中给出的错误消息如下所示
[Error] Failed to load resource: Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers. (get_category_index, line 0)
[Error] XMLHttpRequest cannot load http://api.walander.se/json/get_category_index/. Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers. (walander.se, line 0)
在 Safari 中失败的所有请求都会给出相同的错误消息。
如果我直接在 Safari 中从上面输入示例 url，它会在预期响应的情况下工作。
{"status":"ok","count":2,"categories":[{"id":3,"slug":"development","title":"Development","description":"","parent":0,"post_count":1},{"id":2,"slug":"web","title":"Web","description":"","parent":0,"post_count":1}]}
下面我提供一些代码示例，可能有助于理解我的问题。
这是我的 Angular-RequestService，它处理对服务器的所有 HTTP 请求：
app.service('requestService',function() {
var API = 'http://api.walander.local/api/';
this.send = function( type , service , dataIn , successCallback, errorCallback , loadingInfo ) {
$.ajax({
url: service,
dataType: 'json',
type: type,
data: dataIn,
timeout: 10000,
beforeSend: function() {
if ( loadingInfo != undefined )
wLoading(loadingInfo.div,loadingInfo.text);
},
success: function(data, textStatus, jqXHR) {
successCallback(data);
},
error: function(data , jqXHR, textStatus, errorThrown) {
console.log("ERROR: Service failed, unable to get response");
console.log("ERROR: textStatus: " + textStatus);
console.log("ERROR: errorThrown: " + errorThrown);
errorCallback(data);
},
complete: function() {
if ( loadingInfo != undefined )
wRemoveLoading(loadingInfo.div);
}
});
}
this.get = function( service , dataIn , successCallback , errorCallback , loadingInfo ) {
this.send( 'GET' , API+service , dataIn , successCallback , errorCallback , loadingInfo );
}
this.post = function( service , dataIn , successCallback , errorCallback , loadingInfo ) {
this.send( 'POST' , API+service , dataIn , successCallback , errorCallback , loadingInfo );
}
});
上面的示例 url:s 都是 GET 类型的，这意味着我使用了 reqeustService.get() 函数。
以下是我如何使用 requestService 从 API 请求当前页面和类别列表的示例：
app.service('blogService',function( requestService ) {
this.getPage = function( page , refreshBlog ) {
requestService.get( 'get_posts/?page='+page , null , function(data) {
handleResponse( data , refreshBlog , "page " + page );
} , function(data) {
} , { div: '#post-list' , text: 'Loading posts' } );
}
this.getCategories = function( refreshCategories ) {
requestService.get( 'get_category_index', null , function(data) {
refreshCategories(data.categories);
} , function(data) {
} , { div: '#category-list', text: 'Loading categories' });
}
... ( continued ) ...
};
但是，我认为错误不在 Angular 代码中。我相信它与 htaccess 和 HTTP-request-headers 有关？
提前感谢您的帮助！
【问题讨论】：
-
如果你使用 angularjs - 使用它的 $http 和 $resource，而不是 ajax 的 jquery。我建议你用 1 个按钮来制作页面，该按钮会发出有问题的请求（并且只使用 angular，不使用 jquery）——然后你可以清楚地看到问题所在。
-
感谢您的建议！我将开始使用 angular-js 内置版本。但是我不明白你的按钮是什么意思？这将如何澄清问题？
标签： json angularjs api safari xmlhttprequest