首先，我不太确定如何正确命名该标题或如何描述问题的“足够”程度以使其易于理解。
无论如何，我已经运行了一个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 inspector-tool中给出的错误消息如下
[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中从上方输入示例网址，则可以根据预期的响应进行操作。
{"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有关吗？
在此先感谢您的帮助！
这是一个棘手的问题。但是我想我明白了。=）
以下错误消息的原因是您向 get_categpory_index/您发出请求，仅接受以下编码：gzip，deflate，sdch。
[Error] Failed to load resource: Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers. (get_category_index, line 0)
这是出现错误消息的原因，但修复此问题将无法解决您的问题。
但是，为什么有些请求有效而有些却没有呢？我在萤火虫中进行了一些调查，发现您正在尝试获取http://api.walander.se/json/get_category_index，它将您重定向到http://api.walander.se/json/get_category_index/。第二个请求具有导致错误的不同的头集。
解决方案是在网址末尾添加一个额外的斜杠，以避免重定向。
requestService.get( 'get_category_index/', null , function(data) {
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句