I used the first code snippet you posted (defining the headers attribute) and I was able to successfully pass the headers with my request. I used Google Chrome
developer tools with the AppBuilder In-Browser simulator
to make sure the headers are properly passed.
However, please note that if the request is coming from a domain different than the one it is targeting, then it will only be successful if the target's response contains an Access-Control-Allow-Origin
header in it. This is why if your page/service at http://myapp.com/api/scheduledworkouts
is not configured to present such a header, an error message will be displayed in the Console
of the browser's developer tools. The error will read: "No 'Access-Control-Allow-Origin' header is present on the requested resource."
This error indicates that when the request was sent, the browser couldn't find the Access-Control-Allow-Origin
header. This is why only the OPTIONS request succeeds without sending a POST request at all.
Please open the console and make sure there is no such error. If there is, then
the solution would be to add the Access-Control-Allow-Origin
to the target domain. The approach for adding it, depends on the server/language behind that address. Sometimes a configuration variable in the tool will do the trick. Other times you'll have to add the headers through code yourself.
If you don't see any errors in the console, please send us a screencast or a screenshot of the network information available within the browser's developer tools. You can also run FiddlerCap (with the Decrypt HTTPS Traffic option enabled) before launching your app in the AppBuilder In-Browser client. This is a tool that will intercept the HTTP requests the simulator performs and give you the option to save them to disk. We will need the FiddlerCap capture
to see the requests send on your side.
Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!