1

I'm trying to send api key in header instead of url, but get an error.

With curl everything is okay. I get right json hash:

curl -H "Token: 01PMn25BCj-sluxchSM" http://localhost:3000/api/posts

But Angular gives me the problem:

XMLHttpRequest cannot load http://localhost:3000/api/users/croaton/tags. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. The response had HTTP status code 404.

network


Rails config

  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept, Authorization, Token'
    headers['Access-Control-Max-Age'] = "1728000"
  end

  def cors_preflight_check
    if request.method == 'OPTIONS'
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version, Token'
      headers['Access-Control-Max-Age'] = '1728000'

      render :text => '', :content_type => 'text/plain'
    end
  end

  def authenticate
    api_key = request.headers['Token']
    @user = User.where(api_key: api_key).first if api_key

    unless @user
      head status: :unauthorized
      return false
    end
  end

Angular config

RestangularProvider.setDefaultHeaders({'Token': '01PMn25BCj-sluxchSM'});

Getting json

return Restangular.all('posts').getList();

Croaton
  • 1,812
  • 3
  • 18
  • 28
  • I don't think the header token, nor Restangular, is the problem here. It seems like a CORS issue caused by your Angular app running on `localhost:3001`, and your Rails server running on `localhost:3000`. That said, your `cors_set_access_control_headers` looks lenient enough. If you're testing on Chrome, it may be caused by this: http://stackoverflow.com/a/10892392/624590 – DRobinson Aug 26 '15 at 20:26
  • Yes, I heard about this feature on Chrome, but on Firefox I get the same result. By the way, without authentication it works fine, even on different domains. – Croaton Aug 26 '15 at 21:05
  • Ahhh. Can you try one more thing? Add `Content-Type` to the Allow-Headers of the `cors_preflight_check` as well. I think Angular's `$http` service (used by Restangular) requires this. – DRobinson Aug 26 '15 at 21:29
  • It's still not working :( – Croaton Aug 26 '15 at 22:52
  • Huh. Well, I'm out of ideas for right now. I'll up-vote the question, as I'm pretty curious, too. By the way, the image that you've added to your question doesn't get rendered since it requires being logged into your `skillup` Slack group; it might be worth copying the image and uploading it here, or somewhere that it's visible to all. – DRobinson Aug 26 '15 at 22:58
  • Oh, I'm so stupid :) I've uploaded the image on Imgur. Thank you anyway! – Croaton Aug 26 '15 at 23:16

0 Answers0