无法在 AngularJS 中的请求中指定标头

Posted 2023-02-27

【中文标题】无法在 AngularJS 中的请求中指定标头

【英文标题】：Can't specify headers in request in AngularJS

【发布时间】：2013-10-15 09:03:25

【问题描述】：

我的应用中有 2 个部分 - Angular 前端和 Rails 服务器。而且由于它是不同的域，因此默认情况下请求不起作用。这方面有很多工作人员，包括堆栈，但它对我不起作用。

这是我在角度控制器中的方法：

$scope.test =->
  # transform = (data) ->
  #   $.param data

  $http.post('http://localhost:3000/session/create', 'token=some',
    headers:
      'Access-Control-Allow-Origin': 'http://localhost:9000',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With'
    # transformRequest: transform
  ).success (responseData) ->
    console.log(responseData)

我注释了转换数据，服务器响应没有区别。

我这样配置了应用程序（在一些帖子中看到了这个）：

.config ["$httpProvider", ($httpProvider) ->
  $httpProvider.defaults.useXDomain = true
  delete $httpProvider.defaults.headers.common["X-Requested-With"]
]

我猜这使得请求不像 ajax（但我不确定）。

但我的请求中没有标题。他们都在某个领域Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type：

    Request URL:http://localhost:3000/session/create
    Request Method:OPTIONS
    Status Code:404 Not Found

    Request Headers

    Accept:*/*
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8,ru;q=0.6
    Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type
    Access-Control-Request-Method:POST
    Connection:keep-alive
    DNT:1
    Host:localhost:3000
    Origin:http://localhost:9000
    Referer:http://localhost:9000/
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/31.0.1650.8 Safari/537.36

    Response Headers

    Content-Length:12365
    Content-Type:text/html; charset=utf-8
    X-Request-Id:2cf4b37b-eb47-432a-ab30-b802b3e33218
    X-Runtime:0.030128

Chrome 控制台：

OPTIONS http://localhost:3000/session/create 404 (Not Found) angular.js:6730
OPTIONS http://localhost:3000/session/create No 'Access-Control-Allow-Origin' header is     present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. angular.js:6730
XMLHttpRequest cannot load http://localhost:3000/session/create. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. localhost/:1

其他无关紧要的信息： 在服务器上：

class ApplicationController < ActionController::Base
  before_filter :allow_cross_domain_access

  protected

  def allow_cross_domain_access
    headers['Access-Control-Allow-Origin'] = '*'# http://localhost:9000
    headers['Access-Control-Allow-Headers'] = 'GET, POST, PUT, DELETE'
    headers['Access-Control-Allow-Methods'] = %wOrigin Accept Content-Type X-Requested-With X-CSRF-Token.join(',')
    headers['Access-Control-Max-Age'] = '1728000'

  end
end

路线很明显post "session/create"。和会话控制器：

class SessionController < ApplicationController
  respond_to :json, :html, :js

  def create
    respond_with "logged in"
    # render nothing: true
  end
end

我使用最新版本的 angular 1.2.0.rc-2。 this is my project on github

【问题讨论】：

标头设置不正确，您是否使用其他网络服务器将请求转发到 Rails 应用服务器？

我使用 yeoman angular-generator 生成了应用程序。它基于 grunt 也许有一些 node.js 服务器。你认为它会改变我的要求吗？

第一个请求得到 404 响应。您可以发布 rake 路线的输出吗？ （或者在浏览器中转到localhost:3000/nonexistent_page）

它不会响应 OPTIONS，但这是预检请求所必需的。

前端部分正在发出 OPTIONS 请求（正确），服务器响应 404（很可能不正确）。这就是让我相信服务器是问题的原因。

【参考方案1】：

您在示例中混淆了请求和响应标头。

当执行跨域请求 (CORS) 并且您想要进行不同于普通 GET 的任何操作时 - 例如 POST 或添加自定义标头 - 浏览器将首先发出 OPTIONS 请求。 这是您在开发者控制台中看到的内容：

OPTIONS http://localhost:3000/session/create 404 (Not Found) angular.js:6730

然后，服务器应将适当的标头添加到 OPTIONS 请求的响应中。

因此，您可以从 Angular 调用中删除自定义标头。 接下来，您需要确保您的服务器/应用程序响应 OPTIONS 请求，而不是返回 404。

【讨论】：

我这样做$http(method: 'OPTIONS', url: 'http://localhost:3000/session/create').success (responseData) -> console.log(responseData) 并添加到路由options "session/create" 和控制台现在显示OPTIONS http://localhost:3000/session/create 500 (Internal Server Error) 和相同的下一行。

是的，你是对的，我删除了那些标题行，它现在可以工作了。我想在rails方面出现问题之前，并且由于其他原因不起作用。谢谢。