The "Try It" function always sends an "OPTIONS" request in both API-Designer and API-Console

#1

Hello, there,

I am using RAML API-Designer and API-Console to design our REST API.
I got a problem for the “Try It” function, both in API-Designer and API-Console, when I use “Try It” for a “PUT, POST, DELETE” method, the browser always sends an “OPTIONS” request to the server.

Here is one of the request header. As you can see, I am trying a PUT request to the server, but the browser sent an “OPTIONS” request, with no body, along with additional header “Access-Control-Request-Method”, and that header contains the correct method “PUT”. What I expect is the “Request Method” field should be set to “PUT”.
PS:
The “GET” function is OK.
API-Console version = 2.0.5,
RAML.Settings.proxy = false;
baseUri = http://10.1.0.4/api/v0.1
Tried with Chrome v49.0, Firefox v42.0, and IE v11.0, the same problem.

**General**
 Request URL:http://10.1.0.4/api/v0.1/access_rules/4a052e1f-149d-707b-c67a-91e67cb796e7
 Request Method:**OPTIONS**
 Status Code:200 OK
 Remote Address: 10.1.0.4
**Request Headers**
 Accept:*/*
 Accept-Encoding:gzip, deflate, sdch
 Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
 Access-Control-Request-Headers:accept, content-type
 **Access-Control-Request-Method:PUT**
 Connection:keep-alive
 Host:10.1.0.4
 Origin:http://10.1.0.10
 Referer:http://10.1.0.10/doc/
 User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)  Chrome/49.0.2623.23 Safari/537.36

Response Headers
Allow:HEAD, GET, OPTIONS, PUT, DELETE
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Thu, 28 Jan 2016 13:17:11 GMT
Server:Werkzeug/0.11.3 Python/3.4.3


Could anyone tell me how to fix this?
Many thanks,

Eric Zhu
#2

May not help, but have you tried this in the API Workbench?

#3

Hi, this behaviour is related to the CORS check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS . When you are making calls from a frontend client to an URL on a domain different than the one the console is hosted in, it makes the OPTIONS call first (it is called a preflight request) to ask the target server if the call is authorized (it only does it with POST, PUT, DELETE methods). If the OPTIONS call returns a 200, then the console makes the request you wanted to do originally. Its working for me

#4

Yes, that’s true. I found that later.
Many thanks for your help.
Now I can get correct responses from my API server after I enabled CORS support on my server.

Eric Zhu