CORS, Angular, NelmioCORSBundle and LexikJWTAuthentication: 400 due to OPTIONS Request

[Ulrich Lichtenegger]

Hi,

I am using Angular, the NelmioCORSBundle and LexikJWTAuthentication.

I wired up the Lexik-Bundle, it works. When I try to use it in Angular, i get a 400 Error because the Browser sends an OPTIONS Request.
Does anyone know what i do wrong?

You can find more details attached:


In Angular, i try this:

authService.login = function (credentials) {
   return $http
      .post(ENV.apiEndpoint + 'api/v1/login_check', credentials, {ignoreAuthModule: true})
      .success(function (result) {...
})

My Browser sends then an OPTIONS Request like this.

1. OPTIONS /api/v1/login_check?XDEBUG_SESSION_START=PHPSTORM HTTP/1.1
   Host: localhost:8000
   Connection: keep-alive
   Cache-Control: no-cache
   Pragma: no-cache
   Access-Control-Request-Method: POST
   Origin: http://127.0.0.1:9001
   User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
   Access-Control-Request-Headers: accept, content-type
   Accept: */*
   DNT: 1
   Referer: http://127.0.0.1:9001/
   Accept-Encoding: gzip,deflate,sdch
   Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

and i get the Request

1. HTTP/1.1 400 Bad Request
   Host: localhost:8000
   Connection: close
   X-Powered-By: PHP/5.5.9-1ubuntu4.3
   Set-Cookie: XDEBUG_SESSION=PHPSTORM; expires=Wed, 06-Aug-2014 14:43:00 GMT; Max-Age=3600; path=/
   Cache-Control: no-cache
   Date: Wed, 06 Aug 2014 13:43:01 GMT
   Access-Control-Allow-Credentials: true
   Access-Control-Allow-Methods: POST, PUT, GET, DELETE
   Access-Control-Allow-Headers: x-custom-auth
   Access-Control-Max-Age: 3600
   Access-Control-Allow-Origin: http://127.0.0.1:9001
   Content-Type: text/html; charset=UTF-8
   X-Debug-Token: 29f1ab
   X-Debug-Token-Link: /_profiler/29f1ab

The interesting Parts of my config.yml look like this:

##Json Web Token Authentication
lexik_jwt_authentication:
    private_key_path: %kernel.root_dir%/var/jwt/private.pem   # ssh private key path
    public_key_path:  %kernel.root_dir%/var/jwt/public.pem    # ssh public key path
    pass_phrase:      '*****'                        # ssh key pass phrase


    ## CORS Cross Origin Ressource Sharing COnfiguration for Nelmio Cors Bundle
## https://github.com/nelmio/NelmioCorsBundle
nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
    paths:
        '^/api/%apiversion%/':
            allow_origin: ['*']
            allow_headers: ['X-Custom-Auth']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
        '^/':
            allow_origin: ['*']
            allow_headers: ['X-Custom-Auth']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
            hosts: ['^api\.']

Does anyone know how to fix this?
Thanks for your Help!

[Jérémiah Valérie]

hi,

This section of your Nelmio Cors bundle configuration look strange to me:

        '^/api/%apiversion%/':

            allow_origin: ['*']

            allow_headers: ['X-Custom-Auth']

            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']

            max_age: 3600

        '^/':

            allow_origin: ['*']

            allow_headers: ['X-Custom-Auth']

            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']

            max_age: 3600

            hosts: ['^api\.']

Try removing that instead:

        '^/api/':

[Ulrich Lichtenegger]

Hi Jeremiah,

thans for your reply - unfortunately that was not the solution. %apiversion% is an injected parameter from parameters.yml.
But i changed the rest to your solution, it looks cleaner anyway ;-)

My problem is still there, unfortunately.

[Ulrich Lichtenegger]

Ok, i found a workaround: I added 'content-type' to the allowed headers:

allow_headers: ['X-Custom-Auth', 'content-type']

Does anyone know why my browser sends this header? And why do i need to add it?

[Jérémiah Valérie]

Content-Type header in request is the MIME type of the body of the request (used with POST and PUT requests) (@see for more details http://en.wikipedia.org/wiki/List_of_HTTP_header_fields)

[Nicolas V]

This did not work for me... Although my problem isn't that I send an OPTIONS request. In fact I do request a POST,

but my Response headers (in chrome > network) are set to Allow: OPTIONS, GET, HEAD..

I work with Symfony2 and NelmioCorsBundle.. They are set up and configured to allow all... 

Any ideas?