Can't specify headers in request in AngularJS

Question

I have 2 parts in my app - Angular frontend and rails server. And because it's different domains, requests doesn't work by default. There are a lot of staff about that, including stack, but it doesn't works for me.

This is my method in angular controller:

$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)

I commented transform data, there is no difference in server response.

And I configured app (saw this in some post) like that:

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

I guess that makes request not ajax like (but i'm not sure).

But there is no headers in my request. They all in some field 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 console:

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

Other insignificant information: On the server:

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'] = %w{Origin Accept Content-Type X-Requested-With X-CSRF-Token}.join(',')
    headers['Access-Control-Max-Age'] = '1728000'

  end
end

Routes is obvious post "session/create". And session controller:

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

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

I use latest version of angular 1.2.0.rc-2. this is my project on github

The headers must not be being set correctly, are you using another webserver to forward requests to a rails app server? — Slicedpan
– Slicedpan, Commented Oct 8, 2013 at 12:54
I generated app with yeoman angular-generator. It based on grunt perhaps there is some node.js server. Do you think it can change my requests? — Alexander Kireyev
– Alexander Kireyev, Commented Oct 8, 2013 at 12:57
The first request gets a 404 response. Can you post the output of rake routes? (alternatively go to localhost:3000/nonexistent_page in your browser) — Slicedpan
– Slicedpan, Commented Oct 8, 2013 at 13:35
It won't respond to OPTIONS though, this is necessary for the preflight requests. — Slicedpan
– Slicedpan, Commented Oct 8, 2013 at 14:09
The frontend part is making an OPTIONS request (correctly), the server is responding with 404 (most probably not correct). That is what leads me to believe that the server is the issue. — Slicedpan
– Slicedpan, Commented Oct 8, 2013 at 14:25

Thomas · Accepted Answer · 2013-10-08 14:13:41Z

7

You mix up the request and response headers in your example.

When doing a cross domain request (CORS) and you want to make anything different than a plain GET - so for example a POST or adding custom headers - the browser will first make an OPTIONS request. This is what you see in your developer console:

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

The server then should add the appropriate headers to the response of the OPTIONS request.

So you can remove the custom headers from the Angular call. Next you need to make sure that your server/application answers the OPTIONS request, not returning a 404.

answered Oct 8, 2013 at 14:13

Thomas

12.1k2 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Kireyev Over a year ago

I do this

$http(method: 'OPTIONS', url: 'http://localhost:3000/session/create').success (responseData) ->         console.log(responseData)

and add to routes options "session/create" and console now shows OPTIONS http://localhost:3000/session/create 500 (Internal Server Error) and the same next lines.

Alexander Kireyev Over a year ago

Yes, you are right, i remove those header lines, and it works now. I guess before there is a problem on rails side, and doesn't work by other reason. Thanks.

Collectives™ on Stack Overflow

Can't specify headers in request in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related