Hiding model and collection save and fetch URLs in Backbone.js - backbone.js

This must be a very stupid question because nobody else is asking it. I'm using Backbone.js with URLs for views like website.com/#article/12. To fetch the article, there is a GET request to /article/12. How do I redirect or 404 when the user goes to website.com/article/12 (without the hash) and sees the requested JSON in the browser?

Your server should just respond to different HTTP requests in different ways based on the Accept headers.
On your server, if the request comes in with Accept: application/json then your app should return the JSON. Otherwise (like if it's Accept: text/html) you can return the HTML view you want them to see, redirect, or whatever. How you do this would just depend on what language/framework you're using, but should be relatively easy.
Ideally you'd use the same URL for the client view and drop the # tag (check out HTML5 pushState which Backbone.js supports nicely.)

Related

How to invalidate $http call with cache:true when header changes

I'm fetching a remote resource and caching the result:
$http({
method:'GET',
cache:true,
url:'...'
});
This works fine. However, when the user changes the languge in the UI, I also change the Accept-Language header on all AJAX calls.
The problem is caching is done based on URL so if a call is made using en-US as Accept-Language that gets cached and any other calls, regardless of language, are served from cache.
I don't want to add the language to the URL.
What are my options?
$cacheFactory can be used to invalidate cache when the user changes language. You could try to decorate it, or use wrap it in a service perhaps

How to secure Resource or controller route in Laravel and Backbone

I am integrating laravel and backbone. I have routes like
Route::resource('tasks', 'TaskController'); and backbone model uses this route for get, post and put requests. and this route simply displays raw data. I want to hide/secure this link/url so that users can't see raw data.How can I achieve this??
Short answer : you can't.
If your Backbone application can access to something, a user can access to. For your server, backbone requests are exactly like a user requests. In fact, the browser make this requests for both.
You could put a password in your Backbone code to protect the access... but it's useless because the Backbone code is public (it is client side).
The only thing you can do is to put restrictions on what Backbone (or a user) can see. For example, authenticate the user and verify that he is allowed to access data before to send it.
If your Backbone app can access data there is no reason to hide them to your users. It's like if you want to hide the raw html code in a web site, that's senseless !

is it possible to intercept the response to an HTTP OPTIONS preflight in AngularJS?

I'm trying to implement a simple interceptor that allows me to display a message along the lines of "cannot contact the server" in my Angular app. However as the API is on a different host I'm dealing with CORS pre-flight OPTIONS requests.
I've found that if the API is unavailable Chrome dev tools shows a 503 on the OPTIONS request but Angular's $http interceptor catches a 404 response to the subsequent GET request. I believe this is because the OPTIONS response did not contain the required CORS headers so the GET is actually never performed.
Is is possible to intercept the OPTIONS response? If all I see is a 404 I can't distinguish "server down" from "no such resource".
You can't intercept this request by design - the browser is "checking up" on you, making sure YOU should be allowed to make the request.
We've used three solutions to work around this:
If the problem is that you're using a development environment like NodeJS, and your domain names aren't matching (that is, if you normally wouldn't need to deal with this in Production) you can use a proxy. The https://github.com/substack/bouncyBounceJS NodeJS Module is an easy to use option. Then your Web service request domain will match the domain your page is on, and the check won't be triggered. (You can also use tricks like this in Production, although it can be easily abused!)
Also for temporary use, you can use something like Fiddler or Charles to manipulate the request by faking the required headers, or tell your browser not to check them (--disable-web-security in Chrome).
If you have this problem in Production, you either need to legitimately fix it (adjust the Web service handler to add the required headers - there are only two), or find a way to make the request in a way that doesn't trigger the check. For instance, if you control both the source and target domains, you can put a script on the target that makes the requests to itself. Run this in an IFRAME, invisibly. Then you can use things like postMessage() to communicate back and forth. Large services like Facebook use "XHR bridges" like this for the same reason.

Cross Domain issue in Backbone.js

I have a web application that runs with backbone.js
I am using backbone models and separate REST API for database interactions.
Everything works well in my server. However i have to deploy it in clients AWS server and in that the webservice is in one EC2 instance and the backbone web files are in another instance. This is causing a cross domain error which i cannot resolve.
In jquery ajax i have used crossDomain:true and datatype:jsonp to resolve this issue.
But is there any method like this to resolve this issue in backbone.js? I understand backbone methods (save,fetch,delete) are all jquery-ajax calls but i cannot find a way to get over this issue in backbone.js
Error in console :
OPTIONS domain1.com/webservice_dev/profile/Login
Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
jquery.js:9597 XMLHttpRequest cannot load domain2.com/webservice_dev/profile/Login.
Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
Any guidance would be of great help.
Your server needs to acknowledge the Content-Type header in it's response to the preflight (OPTIONS) request. This is due the fact that the underlying request is of a Content-Type other than text/plain, multipart/form-data, or application/x-www-form-urlencoded.

Backbonejs - CORS error

I have a REST service sitting at http://restservice.net. I am implementing a client for this service in backbone. The client is simply an html file (for bootstrapping the application) and bunch of js files holding my backbonejs code. I am hosting these files on another site http://client.net.
My backbonejs code is calling into http://restservice.net but now allowed due to same origin policy. I have already looked at other SO questions that talk about how I can only talk to http://client.net.
Do I have to redirect every request through http://client.net. I see that as inefficient. What's the point in using a client side MVC framework then? Am I missing something here?
You have two options: JSONP and CORS both of these demand that your http://restservice.net server is setup to suppor the protocols. Forcing backbone to use JSONP simply requires you passing an option to Backbone.sync. One way to do this is like this:
sync: function(method, model, options){
options.dataType = "jsonp";
return Backbone.sync(method, model, options);
}
The problem with JSONP is that you can only make GET requests, so your REST api is effectively read only. To get CORS working you simply need to configure your api server to send back the proper headers . This would pretty liberal:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE OPTIONS
here is a pretty good run down on CORS. If you set that up, then things will pretty much work as usual.
If you don't have the ability to make changes to the server at http://restservice.net then you have no choice but to proxy all the requests to that service. This is definately inefficient but implementing is probably simpler than you would expect. One thing to consider is a reverse proxy

Resources