Angularjs:使用 $resource 传递 token ？

Question

我正在尝试使用带有我的 $resource 请求的 header 传递 token 。通常您可以执行以下操作

  $http.defaults.headers.common

在.config中，但是当应用程序第一次引导时我不知道这些，所以我想我会做以下事情......但它目前没有通过我的标题..

目前 token 是硬编码的，但一旦我确认它工作，那么它将来自持有 token 的注入(inject)服务。

    var resource = $resource('http://localhost:port/todos/:id', {
        port:":3001",
        id:'@id'
    }, {
        get: {
            method: "GET",
            headers: {
                "Accept": "application/stuffs;version=3",
                "Authorization": "Token token='xxxxxxxxx '"
            }
        },
        update: {method: 'PUT'}
    });

    return resource;

如果我检查 fiddler ，我在我的请求中看不到接受或授权 header 。

我确实在 fiddler 中看到了消息，但没有看到我期望的标题。

我在这里错过了什么吗？

有任何想法吗？

谢谢

Answer 1

首先，您的客户端代码没有问题。如果您不执行跨源请求(CORS - xhr 请求到与您的脚本不同的主机/端口)，它应该可以正常工作。这是一个包含您的代码的非 CORS plkr 示例 - 您可以验证您的自定义 header 是否正在发送:http://plnkr.co/edit/cEBGjvYBpXv1q1D323IL?p=preview

如果您必须执行跨源请求，则必须确保您使用的浏览器都支持 CORS(IE >= 10，最新的 Chrome 或 Firefox)，并且您的服务器代码正确响应 CORS 预检 OPTION 请求。这篇文章解释的很好:http://www.html5rocks.com/en/tutorials/cors/

我创建了另一个 plnkr 示例，并通过设置响应以下内容的服务器来实现此功能 (http://plnkr.co/edit/zJVhqJVSnApXGzGGxcN9?p=preview)

首先 - 预检 OPTION 请求

Request URL:http://localhost:8080/todos 
Request Method:OPTIONS

服务器响应

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT
Access-Control-Allow-Headers: Authorization
Content-Length: 0

接下来是“真正的”请求

Request URL:http://localhost:8080/todos
Request Method:GET

响应(注意访问控制允许 header 也在这里):

HTTP/1.1 200 OK
Content-Type: application/x-json; charset=UTF-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT
Access-Control-Allow-Headers: Authorization
Content-Length: 13

回复正文:

{"test":"OK"}