CORS Failure (Mocking Service)


#1

We’re trying to use the API Designer to build our RAML file and API. But then we’d like to enable the “Mocking Service” so we can develop our UI against this before our service is fully implemented. However, it doesn’t look like we can do this because the current mocking service that you can enable from the API Designer fails when you do this because of CORS features.

Can we have CORS enabled so that we can use this mock service from any other domain? Or is there some other workaround for this?

Thanks,
Brent


#2

Hi Brent,

We don’t enable CORS by default because it is an API implementation choice. If the mocking service made every resource CORS-available, it’d actually be violating the contract you specify in your RAML file.

That said, there is a simple way to define CORS behavior for your API in RAML, and to enable CORS for your mocked API - you just need to include a definition for an Access-Control-Allow-Orgin: * header within your RAML. It should look something like this:

#%RAML 0.8
title: "CORS Example"
/example:
  post:
    responses:
      200:
        headers:
          Access-Control-Allow-Origin:
            example: |
              *

You can do it manually for each resource, or put the header in a trait or resource type and use that to apply the intended behavior for each resource. Once this is in place, the mocking service should serve the proper headers for your API to be accessible over CORS!

Hope that helps, and let us know if it doesn’t/you have other questions.


#3

Hi @comptly,

I’m working with Brent on the UI for this project and after adding the Access-Control-Allow-Origin header to the RAML, I’m still getting the same error as it says there is no Access-Control-Allow-Origin header. Maybe this is an issue with my ajax call? I’m sensing this is an issue on my side, but I’m curious to see if you have come across this issue before.

Thanks,
Patrick


#4

Ah, yup it was an error on my side. Changed the dataType to jsonp instead of json and it works now!


#5

Glad it’s working - I’m surprised the header I gave you didn’t work on it’s own, though. I’ll look into it!


#6

@comptly,

Yeah, I’m not really understanding it either. It’s acting weird though, as I can’t make POST or PUT calls, it always just sends a GET request. And the call always returns an error even though I’m getting the correct data. I’m going to play around with it some more and I’ll let you know what I come up with.


#7

Alright I figured it out. The original request our UI was making to the mock service ended up being an OPTIONS request, which was not being handled in our RAML file. Adding the following fixed the issue:

options:
    description: something
    headers:
      Access-Control-Allow-Origin:
        example: |
          *
    responses:
      200:
        headers:
          Access-Control-Allow-Origin:
            example: |
              *
          Access-Control-Allow-Methods:
            example: |
              GET, POST
          Access-Control-Allow-Headers:
            example: |
              Content-Type

And then you can change the values of Access-Control-Allow-Methods and Access-Control-Allow-Headers to allow whatever methods and headers you need for your request.

Also, I had no idea what jsonp was until I just threw it in there to fix the error and after doing some reading on it I now understand why it was not a good solution in this case.