Chrome Preflight CORS OPTIONS returns a 400 bad request


#1

I am POSTING to the API using angular $resource and Chrome is doing a preflight request with the OPTIONS method but this results in the following error: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have set up the header to accept Cross Origin requests but for some reason it fails on the preflight request. Here is my RAML:

/bookings:
 get:
description: Retrieve all active bookings the logged-in user has access to
responses:
  200:
    headers:
      Access-Control-Allow-Origin:
          example: |
            *
    body:
      application/json:
       example: |
          [{
            "data": [
                {
                "BookingID": 1,
                "Driver": "John Doe",
                "VehicleID": 1,
                "Registration": "CHH708",
                "Fleet": "DN30",
                "Destination": "Akaroa",
                "Notes": "Going to ...",
                "StartTimezone": null,
                "Start": "2014/11/20 08:00",
                "End": "2014/11/20 11:00",
                "EndTimezone": null,
                "RecurrenceRule": null,
                "RecurrenceID": null,
                "RecurrenceException": null,
                "Pickup": false
                },
                {
                "BookingID": 2,
                "Driver": "Paul McCartney",
                "VehicleID": 2,
                "Registration": "DRF457",
                "Fleet": "DN30",
                "Destination": "Whangarei",
                "Notes": "Going to ...",
                "StartTimezone": null,
                "Start": "2014/11/19 14:00",
                "End": "2014/11/19 19:00",
                "EndTimezone": null,
                "RecurrenceRule": null,
                "RecurrenceID": null,
                "RecurrenceException": null,
                "Pickup": true
                }
            ],
            "success": true,
            "status": 200
          }]
 post:
description: post a new booking
headers:
  Access-Control-Allow-Origin:
    example: |
      *
body:
  application/x-www-form-urlencoded:
    formParameters:
      Driver:
        type: string
        required: true
      VehicleID:
        type: integer
        required: true
      Registration:
        type: string
        required: true
      Fleet:
        type: string
        required: true
      Destination:
        type: string
        required: true
      Notes:
        type: string
        required: true
      Start:
        type: date
        required: true
      End:
        type: date
        required: true
      Pickup:
        type: boolean
        required: false
  application/json:
    formParameters:
      Driver:
        type: string
        required: true
      VehicleID:
        type: integer
        required: true
      Registration:
        type: string
        required: true
      Fleet:
        type: string
        required: true
      Destination:
        type: string
        required: true
      Notes:
        type: string
        required: true
      Start:
        type: date
        required: true
      End:
        type: date
        required: true
      Pickup:
        type: boolean
        required: false
responses:      
  200:
    headers:
      Access-Control-Allow-Origin:
        example: |
          *
    body: 
      application/json:
        example: |
          {
          "message": "Booking added successfully",
          "success": true,
          "status": 200
          }
options:
description: post a new booking
headers:
  Access-Control-Allow-Origin:
    example: |
      *
body:
  application/x-www-form-urlencoded:
    formParameters:
      Driver:
        type: string
        required: true
      VehicleID:
        type: integer
        required: true
      Registration:
        type: string
        required: true
      Fleet:
        type: string
        required: true
      Destination:
        type: string
        required: true
      Notes:
        type: string
        required: true
      Start:
        type: date
        required: true
      End:
        type: date
        required: true
      Pickup:
        type: boolean
        required: false
  application/json:
    formParameters:
      Driver:
        type: string
        required: true
      VehicleID:
        type: integer
        required: true
      Registration:
        type: string
        required: true
      Fleet:
        type: string
        required: true
      Destination:
        type: string
        required: true
      Notes:
        type: string
        required: true
      Start:
        type: date
        required: true
      End:
        type: date
        required: true
      Pickup:
        type: boolean
        required: false
responses:      
  200:
    headers:
      Access-Control-Allow-Origin:
        example: |
          *
    body: 
      application/json:
        example: |
          {
          "message": "Booking added successfully",
          "success": true,
          "status": 200
          }

#2

Not really sure if that has something to do with RAML itself as it is just your specification and no logic is involved. Seems in your case there is some missing logic setting the header? Am I right?


#3

Well I think it has since I first had the CORS issue with GET, which I fixed by adding those headers in my RAML. My problem is that for POST (or OPTIONS for that mater) it doesn’t work…