arcovoltaico arcovoltaico - 9 days ago 6
jQuery Question

401 Preflight error on Ajax call to different domain URL

My request as displayed on Chrome Network XHR tool.

General:
Remote Address:127.0.0.1:80
Request URL:http://ws.uvx/app_dev.php/api/venuelogin
Request Method:OPTIONS
Status Code:400 Bad Request

Response Headers:
view source
Access-Control-Allow-Headers:x-custom-auth
Access-Control-Allow-Methods:POST, PUT, GET, DELETE, OPTIONS
Access-Control-Allow-Origin:http://localhost:8383
Access-Control-Max-Age:3600
Cache-Control:no-cache, max-age=604800
Connection:close
Content-Encoding:gzip
Content-Length:52
Content-Type:text/html; charset=UTF-8
Date:Wed, 23 Sep 2015 07:59:04 GMT
Expires:Wed, 30 Sep 2015 07:59:04 GMT
Server:Apache
Vary:Accept-Encoding
X-Debug-Token:8cd64c
X-Debug-Token-Link:/_profiler/8cd64c
X-Powered-By:PHP/5.5.10

Request Headers:
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:es-ES,es;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, content-type, p
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:ws.uvx
Origin:http://localhost:8383
Pragma:no-cache
Referer:http://localhost:8383/UVox%20Mobile/jwt-demo/venuelogin.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36


My Ajax call:

jQuery.ajax({
url: "http://ws.uvx/app_dev.php/api/venuelogin",
type: "GET",
headers: {
"p": "1441",
"Content-type": "application/json"
}
})


And the Symfony2 cors config:

nelmio_cors:
defaults:
allow_credentials: false
allow_origin: []
allow_headers: []
allow_methods: []
expose_headers: []
max_age: 0
hosts: []
origin_regex: false
paths:
'^/api/':
allow_origin: ['*']
allow_headers: ['X-Custom-Auth']
allow_methods: ['POST', 'PUT', 'GET', 'DELETE','OPTIONS']
max_age: 3600


If I change allow_headers: ['X-Custom-Auth'] to allow_headers: ['*'] Then I get a 500 error instead.

I have tried also with Content-Type:application/octet-stream as suggested by PAW, the OSX app where I check my API resquests. In fact, this request is 200 OK from PAW.

Also executing the CURL I get the JSON with 200 OK.

What I'm missing?
Thanks a lot.

Answer

The first thing to check is that you are not rewriting the headers on your server (site-enabled config). So take a look at them and comment any Allow-Origin line.

The second step is on your app (in my case Symfony) :

a) My FOSRESTBundle config was including html before json on the following line:

format_listener:
    rules:
        - { path: ^/, priorities: [ json, xml, html ], fallback_format: json, prefer_extension: true }

So I was forced to prefix the url with .json, or update the line as below, otherwise the server was trying to return a html, and because I did not create a template for it, then I got a 500 error.

b) The final step was avoiding to declare the route 'individually' at routing.yml, and including it as a'manual' fosrestbundle route annotation on a controller used on a rest type route.

api_venues:
    type:     rest
    resource: Acme\DemoBundle\Controller\Api\VenueController