Json 不同浏览器的HTTP请求不同

首先，我真的不确定如何正确地命名这个问题，或者如何描述问题的“足够”以使其易于理解

无论如何，我已经安装了wordpress，作为博客的后端。它安装了一个json api插件。为此，我添加了一个基于角度的前端，它使用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工具中给出的错误消息

[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类型，这意味着我使用了requeustservice.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 ) ...
};

然而，我不相信错误在角度代码中。我相信这与htaccess和HTTP请求头有关

---

提前感谢您的帮助

这是一个需要解决的棘手问题。但我想我明白了

下面错误消息的原因是您请求

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)

这是出现错误消息的原因，但解决此问题不会解决您的问题

---

但为什么有些请求有效，而有些请求无效？我在firebug中做了一些调查，发现您正在尝试获取，这会将您重定向到。第二个请求有一组不同的头，这会导致错误

解决方案是在url的末尾添加一个额外的斜杠，以避免重定向

requestService.get( 'get_category_index/', null , function(data) {

---

如果你使用angularjs——使用它的$http和$resource，而不是ajax的jquery。我建议你用一个按钮来创建一个页面，这个按钮可以发出有问题的请求（并且只使用angular，不使用jquery）——这样你就可以清楚地看到问题所在。谢谢你的建议！我将开始使用angular js内置版本。但是我不明白你的按钮是什么意思？这将如何澄清问题？