Question

首先，我不确定如何正确地标题这个或如何描述＆＃34;足够＆＃34;这个问题让它变得可以理解。

无论如何，我已经运行了一个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中输入上面的示例网址，它会给出预期的响应。

{"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有关？

提前感谢您的帮助！

Answer 1

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

以下错误消息的共鸣是您向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中做了一些调查，我发现你正在尝试获取http://api.walander.se/json/get_category_index，这会将你重定向到http://api.walander.se/json/get_category_index/。第二个请求具有不同的标头集，这会导致错误。

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

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

浏览器之间的HTTP请求不同

1 个答案: