Backbone model.save() is causing OPTIONS not POST - ruby-on-rails

I have a 'Create Account' view that I am starting to work on. Backbone 1.1.2 (typescript) front-end, Rails 4.2 beta 1 web service back-end.
Account Model
export class Account extends Backbone.Model {
public urlRoot: string;
public validation:any;
constructor(attributes?: any, options?: any){
this.urlRoot = 'http://domain.fake/accounts';
this.validation = {
email: {
required: true,
pattern: 'email'
},
password: {
required: true,
minLength: 6
}
};
super(attributes, options);
}
}
Create Account View:
export class CreateAccountView extends Backbone.View {
public template: string;
public events: any;
public model: accountModelImport.Account;
constructor(options?: Backbone.ViewOptions){
this.el = '#modal';
this.template = createAccountViewTemplate;
this.model = new accountModelImport.Account();
this.events = {
'click #create-account-submit' : 'create'
};
super(options);
}
public render(): CreateAccountView {
this.$el.html(_.template(this.template));
Backbone.Validation.bind(this);
this.$el.modal('show');
return this;
}
public create(){
var email:string = $('#create-account-email').val(), password:string = $('#create-account-password').val(), passconf:string = $('#create-account-password-confirmation').val();
this.model.set({email: email, password: password, password_confirmation: passconf});
this.model.save(null, {success: this.success, error: this.error});
}
public success(){
alert('Success');
}
public error(){
alert('error');
}
}
Rails output on model.save() from above:
ActionController::RoutingError (No route matches [OPTIONS] "/accounts"):
I have seen many questions about what to pass as the first argument to .save() and I have tried them all with the same result each time: null, false, {}
I have tried searching for a question with the same issue but haven't been able to find one. I would like to try to get this to work natively before I go down the road of overriding the .sync() method.
Why is .save() trying to use OPTIONS instead of POST?

Why is .save() trying to use OPTIONS instead of POST?
It's not. This is the CORS "preflight request" at work. If the OPTIONS request is successful, the POST request will follow.
...The preflight request is made as an HTTP OPTIONS request (so be
sure your server is able to respond to this method). It also contains
a few additional headers:
Access-Control-Request-Method - The HTTP method of the actual request.
This request header is always included, even if the HTTP method is a
simple HTTP method as defined earlier (GET, POST, HEAD).
Access-Control-Request-Headers - A comma-delimited list of non-simple
headers that are included in the request.
The preflight request is a way of asking permissions for the actual
request, before making the actual request. The server should inspect
the two headers above to verify that both the HTTP method and the
requested headers are valid and accepted.
See http://www.html5rocks.com/en/tutorials/cors/

As pointed out by #meagar in his answer to this question this was not anything that backbone was trying to do wrong. It was a CORS issue. I had the headers set up manually using config.action_dispatch.default_headers.merge! but apparently that wasn't enough.
A little more googling reveled this little gem of an answer to me (get it, 'gem')...
Rails RoutingError (No route matches [OPTIONS]
Which the answer there lead me to https://github.com/cyu/rack-cors
After installing the gem and configuring per their instructions, the POST request went through as expected.
Hope this helps others in the future, and be sure to give credit to #meagar for helping me down the right path.

Related

DNN Cannot access POST method in DNN Api Controller

My GET method WORKS fine when I use the url logged in as SuperUser like this(I get the name of the first user pulled from the DB):
http://localhost/DesktopModules/AAAA_MyChatServer/API/ChatApi/GetMessage
But I cannot access the POST method in the same controller either using AJAX from view or just by entering the url (post method doesnt get hit/found):
http://localhost/DesktopModules/AAAA_MyChatServer/API/ChatApi/SendMessage
And also this fails as well:
$('#sendChat').click(function (e) {
e.preventDefault();
var user = '#Model.CurrentUserInfo.DisplayName';
var message = $('#chatBoxReplyArea').val();
var url = '/DesktopModules/AAAA_MyChatServer/API/ChatApi/SendMessage';
$.post(url, { user: user, message: message }, function (data) {
}).done(function () {
});
});
The Error message is:
<Error>
<Message>
No HTTP resource was found that matches the request URI 'http://localhost/DesktopModules/AAAA_MyChatServer/API/ChatApi/SendMessage'.
</Message>
<MessageDetail>
No action was found on the controller 'ChatApi' that matches the name 'SendMessage'.
</MessageDetail>
</Error>
And sometimes:
"The controller does not support GET method"
even though I do have both a GET and a POST there and the GET works. What am I missing?
I have made a routing class in my DNN project:
using DotNetNuke.Web.Api;
namespace AAAA.MyChatServer
{
public class RouteMapper : IServiceRouteMapper
{
public void RegisterRoutes(IMapRoute mapRouteManager)
{
mapRouteManager.MapHttpRoute("MyChatServer", "default", "{controller}/{action}", new[] { "AAAA.MyChatServer.Services" });
}
}
}
I added a DNN Api Controller in folder Services of my project named AAAA.MyChatServer:
using DotNetNuke.Web.Api;
using System.Linq;
using System.Net.Http;
using System.Web.Http;
namespace AAAA.MyChatServer.Services
{
[DnnAuthorize(StaticRoles = "SuperUser")]
public class ChatApiController : DnnApiController
{
[HttpGet]
public HttpResponseMessage GetMessage()
{
ChatServerManager csm = new ChatServerManager();
var users = csm.GetAllUsers();
var user = users.FirstOrDefault().Name;
return Request.CreateResponse(System.Net.HttpStatusCode.OK, user);
}
[System.Web.Http.HttpPost]
public HttpResponseMessage SendMessage(string toUser, string message)
{
return Request.CreateResponse(System.Net.HttpStatusCode.OK);
}
}
}
There are two ways to call a POST method in a DNN WebAPI: with parameters and with an object. If you use parameters, as you have in your SendMessage method, those parameter values need to be delivered via the Query String.
On the other hand, creating an object and sending that with your call to the WebAPI method can handle a great many more scenarios and is arguably a better way of handling any POST method (as it hides those values from prying eyes, making the call more difficult to counterfeit). To handle this, you can remove the parameters from your SendMessage method and instead interrogate the HttpContext.Current.Request object within your method. The object you created { user: user, message: message } will be nestled in there somewhere.
As it is written in your example, your object was sailing past your parameters like two ships in the night.
I've only just figured this out myself, and I don't have all the understanding I need yet, but hopefully this will help you along your way. Here are some articles I referenced in my quest to use cURL to upload a file to my DNN WebAPI:
https://www.dnnsoftware.com/community-blog/cid/134676/getting-started-with-dotnetnuke-services-framework
https://www.dnnsoftware.com/community-blog/cid/144400/webapi-tips
How To Accept a File POST
https://forums.asp.net/t/2104884.aspx?Uploading+a+file+using+webapi+C+
https://talkdotnet.wordpress.com/2014/03/18/dotnetnuke-webapi-helloworld-example-part-one/comment-page-1/
http://dnnmodule.com/Article/ArticleDetail/tabid/111/ArticleId/511/Dotnetnuke-7-0-WebAPI-Tips.aspx
How to post file using Curl in WebApi in Asp.Net MVC
Good luck!
Your Web Api for SendMessage contain 2 parameter, so it should POST in query string :
http://localhost/DesktopModules/AAAA_MyChatServer/API/ChatApi/SendMessage?touser=john&message=hello
if you want to POST it using data of object, you need to make the Web Service parameter as object model
Also your javascript parameter is different from the Web Service, as it use "toUser"

Grails 2.5.5: Unable to access the request body of a PUT request?

I'm attempting to implement a RESTful API using Grails 2.5.5, and I'm running into a few issues.
It appears that Grails does not automatically map any methods for the corresponding HTTP methods, so I'm editing UrlMappings.groovy.
For example, take the following URLs:
GET /v1/1/persons/ <--- List of persons
POST /v1/1/persons/ <--- Create a new person
PUT /v1/1/persons/1234 <--- Edit person with ID of 1234
These are my url mappings:
"/v1/$appId/$controller/$action?/$id?(.$format)?" {
namespace = "v1"
}
"/v1/$appId/$controller"(action: "save", method: "POST") {
namespace = "v1"
}
"/v1/$appId/$controller/$id"(action: "update", method: "PUT") {
namespace = "v1"
}
So now, the first mapping will handle the GET request in my example urls as well as other generic urls.
The second mapping will handle the second url from my example urls.
And lastly, the third mapping handles the third url from my example urls.
The issue I'm facing now is that my command object isn't getting bound properly for my PUT request. The POST request works fine however.
These are my methods:
def save(MyCommand cmd) {
// works great
}
def update(MyCommand cmd) {
// cmd properties are null
// params.id is bound though. So I'm getting the path variable.
}
As you can see, the logic is very simple.
But I'm completely stumped as to why I can't get the request body in the PUT method.
Additional question: How can I get the above urls to work in addition to this url?:
/v1/1/persons/1234/status
I tried the following mapping, but it does not seem to work:
"/v1/$appId/$controller/$id/$action" {
namespace = "v1"
}
It feels like I'm stuck in this URLMappings hell!

WebAPI not found

Sadly, I cannot get the most basic of things working with WebAPI
$.ajax({
url: "https://192.168.1.100/Api/Authentication/LogIn",
type: "POST",
contentType: "application/json",
data: "{ 'username': 'admin', 'password': 'MyPass' }",
error: function (r, s, e) { alert(e); },
success: function (d, s, r) { alert(s); }
});
I get "Not found"
API controller definition
public class AuthenticationController : ApiController
{
[HttpPost]
public bool LogIn(string username, string password)
{
return true;
}
}
If I remove HttpPost and replace it with HttpGet and then do
$.ajax({
url: "https://192.168.1.100/Api/Authentication/LogIn?username=admin&password=MyPass",
type: "GET",
error: function (r, s, e) { alert(e); },
success: function (d, s, r) { alert(s); }
});
That works fine.
What's wrong with WebAPI?
This article should help answer some of your questions.
http://encosia.com/using-jquery-to-post-frombody-parameters-to-web-api/
I believe the thinking here is that, especially in a RESTful API, you’ll want to bind data to the single resource that a particular method deals with. So, pushing data into several loose parameters isn’t the sort of usage that Web API caters to.
When dealing with post data, you can tell your action method to bind its parameters correctly like this:
public class LoginDto {
public string Username { get; set; }
public string Password { get; set; }
}
[HttpPost]
public bool LogIn(LoginDto login) {
// authenticate, etc
return true;
}
A couple things. Yahia's change is valid. Also, POSTs need a little direction in WebAPI to know where to look for their data. It's pretty silly in my opinion. If you know it's a POST, look at the message body. At any rate, change your POST to this and things will work. The attribute tells WebAPI to look in the body and the model does binding.
The AuthModel is just a simple model containing your username and password properties. Because of the way WebApi wants to bind to the input, this will make your life easier.
Read here for more details:
http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1
Should be good to go with those changes.
Binding in WebAPI doesn't work if you use more than 1 parameter.
Though the same works in MVC controller.
In WebAPI use a class to bind two or more parameters. Read useful article:
http://encosia.com/using-jquery-to-post-frombody-parameters-to-web-api/
You may solve it the following ways:
1. Do the same in MVC action (it works)
2. Stay parameterless Post and read request like this
[HttpPost]
[ActionName("login")]
public async Task<bool> Post()
{
var str= await Request.Content.ReadAsStringAsync();
//
3. Incapsulate parameters to class like gyus prompted
}
Hope it helps ;)
POST action can have only 1 body...
There is no way to send 2 bodies (in your case 2 strings).
Because of this, the WebAPI parser would expect to find it in URL and not in body.
You can solve it by putting attributes and set that one parameter will come from URL and another from body.
In general, When there is only one object parameter in method - there is no need for the attribute [FromBody].
Strings would be expected to be in URL.
So - you can try send them in the URL as parameters (much like you did in GET)
Or - build a class to wrap it.
I would strongly recommend to use POST for login action.

ASP.NET MVC Model binding doesn't work with AJAX GET but works with Post

I'm having a problem using the Jquery AJAX as a GET Request.
For some reason the ASP.NET MVC model binder doesn't seem to be able to bind to my filter item. What happens is the action result is called but an empty object is created.
However if I change from HTTP Get to HTTP Post then it works.
Why would that be?
From what I understand it would be better to use GET as no data is changing on the server.
Here's a stripped down version of my code:
AJAX:
$.ajax({
url: url,
contentType: 'application/json',
dataType: 'json',
type: "GET",
data: "{'filter':" + ko.toJSON(model.filter) + "}",
error: function (xhr, textStatus, errorThrown) {
},
success: function (returnedData) {
}
ActionResult:
[HttpGet]
public virtual ActionResult Index(IFilter filter)
{
ViewModel filteredViewModel = GetFilteredViewModel(filter);
if (Request.IsAjaxRequest())
{
return toJSON(filteredViewModel );
}
return View(filteredViewModel );
}
Filter:
public class Filter: IFilter
{
public Nullable<DateTime> LogDate { get; set; }
public Nullable<int> SpecificItem_ID { get; set; }
}
First, just to clear up misconceptions, POST doesn't mean change, necessarily. It's perfectly valid to request via POST when accessing a "function", for lack of a better word. For example:
# Request
POST /add-xy
{ "x": 2, "y": 2 }
# Response
200 OK
4
Nothing has "changed", but POST is still the most appropriate HTTP verb.
That said, there's a fundamental difference between GET and POST requests, namely the concept of a POST "body". A POST body can have a content type and therefore can be interpreted properly on the server-side as JSON, XML, etc. With GET, all you have is a querystring, which is just simply a string.
The problem you're having is that with GET, the filter "object" is just a string, and since a string does not implement IFilter the modelbinder can't bind it. However, via POST, the filter "object" is sent in the POST body with a proper content type. So, the modelbinder receives it as JSON, and maps the JSON object onto an implementation of IFilter.
The moral is that GET is only viable for simple requests -- with data that's pretty much only name-value pairs of simple types. If you need to transmit actual objects, you need to use POST.
I don't know why it was accepted, but the currently accepted answer is totally wrong.
ModelBinders don't bind the sent parameters if your object name is precisely filter. So change the name of the object and it will bind properly.

Dart request succeeding ... somehow?

I'm developing a dart application which will consume a REST service I'm building. I started writing out the dart code to perform an ajax request to my login endpoint. However, even when my dart ajax request should fail, it claims to succeed.
I don't have any services up and running (and even if I did it would be using the wrong domain / port right now), but this code gives a 200 OK HttpResponse every time:
class PlayerController {
const PlayerController();
static const String LOGIN_URL = "login";
void login(String username, String password) {
Map<String, String> headers = {"Content-Type": "application/x-www-form-urlencoded"};
String body = "j_username=$username&j_password=$password&submit=Login";
HttpRequest.request(LOGIN_URL, method: "POST", requestHeaders: headers, sendData: body)
.then((request) => processLogin(request, username))
.catchError((e) => processLoginError(e));
}
void processLogin(var whatIsThis, String username) {
query("#loginButton").text = "Logout";
//TODO get the player then set them
}
void processLoginError(var e) {
print("total failure to login because of $e");
}
}
It always hits the processLogin method, and never hits the processLoginError method. Does anyone have any idea why this would be? Should I be performing this ajax request in a different way? (If you couldn't guess, it will be signing into spring security).
I read somewhere that file system requests always succeed. Is Dart somehow making this a file system request rather than a web request?
This is because the request actually completes successfully.
Your request to "login" will actually call http://127.0.0.1:6521/[Path_to_your_Dart_file]/login
The server started by Dart when running in Dartium (127.0.0.1:6521) seems to answer to every POST request with HTTP 200 and an empty response body.
If you change the method from POST to GET, it will fail as expected.
As for why the server does this - I don't really know. This would have to be answered by the Dart team.

Resources