I am facing cache issue in angularjs and i have tried
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" conten="no-cache">
and in request headers
headers : {
'cache': 'false',
'Cache-Control': 'no-cache',
'Cache-Control': 'private',
'Cache-Control': 'must-revalidate',
'Cache-Control': 'max-age=0'
},
If i modified input in page 1 and later if i came back to page 1 again then the modified input sometimes taking value from cache data.
How to resolve this cache problem in angularjs?
You can add version to the templates which you want to prevent from caching.
To do this in angular js the simple and best way is as follows.
create a service
app.factory('preventTemplateCache',function(){
var threeDigitRandom = Math.floor(Math.random() * 999);
return {
'request': function(config) {
if (config.url.indexOf('templates') !== -1) {
config.url = config.url + '?v=' + threeDigitRandom;
}
return config;
}
}
})
here config.url is your path to template(.html)
Call the factory using $httpProvider.interceptors like below
app.config(function($httpProvider) {
$httpProvider.interceptors.push('preventTemplateCache');
});
This perfectly works in all cases to prevent template caching in angular js application.
I have created a demo using JavaScript for Flickr photo search API.
Now I am converting it to the AngularJs.
I have searched on internet and found below configuration.
Configuration:
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Service:
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.flickrPhotoSearch = function() {
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
dataType: 'jsonp',
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
});
}
});
Controller:
myApp.controller('flickrController', function($scope, dataService) {
$scope.data = null;
dataService.flickrPhotoSearch().then(function(dataResponse) {
$scope.data = dataResponse;
console.log($scope.data);
});
});
But still I got the same error.
Here are some links I tried:
XMLHttpRequest cannot load URL. Origin not allowed by Access-Control-Allow-Origin
http://goo.gl/JuS5B1
You don't. The server you are making the request to has to implement CORS to grant JavaScript from your website access. Your JavaScript can't grant itself permission to access another website.
I had a similar problem and for me it boiled down to adding the following HTTP headers at the response of the receiving end:
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
You may prefer not to use the * at the end, but only the domainname of the host sending the data. Like *.example.com
But this is only feasible when you have access to the configuration of the server.
Try using the resource service to consume flickr jsonp:
var MyApp = angular.module('MyApp', ['ng', 'ngResource']);
MyApp.factory('flickrPhotos', function ($resource) {
return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});
MyApp.directive('masonry', function ($parse) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
}
};
});
MyApp.directive('masonryItem', function () {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.imagesLoaded(function () {
elem.parents('.masonry').masonry('reload');
});
}
};
});
MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
$scope.photos = flickrPhotos.load({ tags: 'dogs' });
});
Template:
<div class="masonry: 240;" ng-controller="MasonryCtrl">
<div class="masonry-item" ng-repeat="item in photos.items">
<img ng-src="{{ item.media.m }}" />
</div>
</div>
This issue occurs because of web application security model policy that is Same Origin Policy Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. That means requester must match the exact host, protocol, and port of requesting site.
We have multiple options to over come this CORS header issue.
Using Proxy - In this solution we will run a proxy such that when request goes through the proxy it will appear like it is some same origin.
If you are using the nodeJS you can use cors-anywhere to do the proxy stuff. https://www.npmjs.com/package/cors-anywhere.
Example:-
var host = process.env.HOST || '0.0.0.0';
var port = process.env.PORT || 8080;
var cors_proxy = require('cors-anywhere');
cors_proxy.createServer({
originWhitelist: [], // Allow all origins
requireHeader: ['origin', 'x-requested-with'],
removeHeaders: ['cookie', 'cookie2']
}).listen(port, host, function() {
console.log('Running CORS Anywhere on ' + host + ':' + port);
});
JSONP - JSONP is a method for sending JSON data without worrying about cross-domain issues.It does not use the XMLHttpRequest object.It uses the <script> tag instead. https://www.w3schools.com/js/js_json_jsonp.asp
Server Side - On server side we need to enable cross-origin requests.
First we will get the Preflighted requests (OPTIONS) and we need to allow the request that is status code 200 (ok).
Preflighted requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if it uses methods other than GET or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.
It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)
If you are using the spring just adding the bellow code will resolves the issue.
Here I have disabled the csrf token that doesn't matter enable/disable according to your requirement.
#SpringBootApplication
public class SupplierServicesApplication {
public static void main(String[] args) {
SpringApplication.run(SupplierServicesApplication.class, args);
}
#Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
};
}
}
If you are using the spring security use below code along with above code.
#Configuration
#EnableWebSecurity
public class SupplierSecurityConfig extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and()
.httpBasic();
}
}
I encountered a similar problem like this, problem was with the backend . I was using node server(Express). I had a get request from the frontend(angular) as shown below
onGetUser(){
return this.http.get("http://localhost:3000/user").pipe(map(
(response:Response)=>{
const user =response.json();
return user;
}
))
}
But it gave the following error
This is the backend code written using express without the headers
app.get('/user',async(req,res)=>{
const user=await getuser();
res.send(user);
})
After adding a header to the method problem was solved
app.get('/user',async(req,res)=>{
res.header("Access-Control-Allow-Origin", "*");
const user=await getuser();
res.send(user);
})
You can get more details about Enabling CORS on Node JS
This answer outlines two ways to workaround APIs that don't support CORS:
Use a CORS Proxy
Use JSONP if the API Supports it
One workaround is to use a CORS PROXY:
angular.module("app",[])
.run(function($rootScope,$http) {
var proxy = "//cors-anywhere.herokuapp.com";
var url = "http://api.ipify.org/?format=json";
$http.get(proxy +'/'+ url)
.then(function(response) {
$rootScope.response = response.data;
}).catch(function(response) {
$rootScope.response = 'ERROR: ' + response.status;
})
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
Response = {{response}}
</body>
For more information, see
GitHub: CORS Anywhere
Use JSONP if the API supports it:
var url = "//api.ipify.org/";
var trust = $sce.trustAsResourceUrl(url);
$http.jsonp(trust,{params: {format:'jsonp'}})
.then(function(response) {
console.log(response);
$scope.response = response.data;
}).catch(function(response) {
console.log(response);
$scope.response = 'ERROR: ' + response.status;
})
The DEMO on PLNKR
For more information, see
AngularJS $http Service API Reference - $http.jsonp
Answered by myself.
CORS angular js + restEasy on POST
Well finally I came to this workaround:
The reason it worked with IE is because IE sends directly a POST instead of first a preflight request to ask for permission.
But I still don't know why the filter wasn't able to manage an OPTIONS request and sends by default headers that aren't described in the filter (seems like an override for that only case ... maybe a restEasy thing ...)
So I created an OPTIONS path in my rest service that rewrites the reponse and includes the headers in the response using response header
I'm still looking for the clean way to do it if anybody faced this before.
Apache/HTTPD tends to be around in most enterprises or if you're using Centos/etc at home. So, if you have that around, you can do a proxy very easily to add the necessary CORS headers.
I have a blog post on this here as I suffered with it quite a few times recently. But the important bit is just adding this to your /etc/httpd/conf/httpd.conf file and ensuring you are already doing "Listen 80":
<VirtualHost *:80>
<LocationMatch "/SomePath">
ProxyPass http://target-ip:8080/SomePath
Header add "Access-Control-Allow-Origin" "*"
</LocationMatch>
</VirtualHost>
This ensures that all requests to URLs under your-server-ip:80/SomePath route to http://target-ip:8080/SomePath (the API without CORS support) and that they return with the correct Access-Control-Allow-Origin header to allow them to work with your web-app.
Of course you can change the ports and target the whole server rather than SomePath if you like.
var result=[];
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope, $http) {
var url="";// your request url
var request={};// your request parameters
var headers = {
// 'Authorization': 'Basic ' + btoa(username + ":" + password),
'Access-Control-Allow-Origin': true,
'Content-Type': 'application/json; charset=utf-8',
"X-Requested-With": "XMLHttpRequest"
}
$http.post(url, request, {
headers
})
.then(function Success(response) {
result.push(response.data);
$scope.Data = result;
},
function Error(response) {
result.push(response.data);
$scope.Data = result;
console.log(response.statusText + " " + response.status)
});
});
And also add following code in your WebApiConfig file
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
we can enable CORS in the frontend by using the ngResourse module.
But most importantly, we should have this piece of code while making the ajax
request in the controller,
$scope.weatherAPI = $resource(YOUR API,
{callback: "JSON_CALLBACK"}, {get: {method: 'JSONP'}});
$scope.weatherResult = $scope.weatherAPI.get(YOUR REQUEST DATA, if any);
Also, you must add ngResourse CDN in the script part and add as a dependency
in the app module.
<script src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>
Then use "ngResourse" in the app module dependency section
var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);
I have the following code, which works perfectly fine on Mozilla, Chrome, but not on Microsoft Edge or Internet Explorer. Here is what happens.
When user loads a webpage I trigger the following code:
$http.get("/api/items")
.then(function (response) {
angular.copy(response.data, $scope.items);
}, function (error) {
$scope.errorMessage = error.statusText;
})
.finally(function () {
$scope.isBusy = false;
});
which pulls all the values into the <ul>. This part works normally on all browsers. However when I trigger the following one:
$scope.interval = $interval(function () {
$http.get("/api/items")
.then(function (response) {
//success
//loop through the response
angular.forEach(response.data, function (value, key) { ... more code here}
then suddenly the response is no longer from my web api. What I mean is, that when I was debugging my application and placed breakpoint in my GET api (I mean under Visual Studio in my MVC Controller) I could not see the get call being triggered from Microsoft Edge.
Here is what network inspector looks like from Chrome:
and this one is from Edge:
As far as I understand, Edge has only made one real XHR call towards my GET, and all the remaining ones are just cached from memory?
How can one solve this problem? Why is this even happening?
In the end I found out, that the problem is with Angular with storing Cache. There are two options one can use (taken from other StackOverflow posts):
1) Angular Method (which for unknown reason did not work for me):
myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Answer edited to include suggestions from comments
// because previous version of code introduced browser-related errors
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);
2) The ASP.NET way of decorating GET method:
[ResponseCache(NoStore = true, Duration = 0)]
I have an AngularJS (1.4) app that relies upon $http.get requests to a REST API.
There are two types of request, one for "Search Results", and one for "View Profile". Sometimes (but not consistently so), the request for "View Profile" is not returned. Checking in the Chrome network tab it's marked as Stalled.
Looking this up it seems maybe I am hitting the Chrome max connections limit - but I don't understand how this can be the case as surely the "connection" is not created again each time an $http.get request is called?
Does anybody have any ideas?
Simplified code below:
app.factory('garageService', function($http,$q) {
var garageService = {};
var url = ''; // CAN'T SHARE
var token = ''; // CAN'T SHARE
var radius = 50;
// GET SEARCH RESULTS
garageService.getList = function(lat,lng) {
var deferred = $q.defer();
if(window.XDomainRequest){
//XDR Version for IE
} else {
$http.get(url+'/'+token+'/list/'+lat+'/'+lng+'/'+radius, { cache: true, timeout: 10000 }).success(function(response){
deferred.resolve(response);
}).error(function(){
deferred.reject();
});
}
return deferred.promise;
}
// GET VIEW PROFILE
garageService.getProfile = function(id) {
var deferred = $q.defer();
if(window.XDomainRequest){
//XDR Version for IE
} else {
$http.get(url+'/'+token+'/get/'+id, { cache: true, timeout: 10000 }).success(function(response){
deferred.resolve(response);
}).error(function(){
deferred.reject();
});
}
return deferred.promise;
}
return garageService;
});
And here are the response headers from a working request:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin: //CAN'T SHARE
Cache-Control:no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Type:application/json
Date:Thu, 31 Dec 2015 10:28:37 GMT
ETag:"1451557717"
Expires:Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive:timeout=2, max=200
Last-Modified:Thu, 31 Dec 2015 10:28:37 GMT
Server:Apache
Transfer-Encoding:chunked
X-Powered-By:PHP/5.3.3
I am trying to cache the response with angularjs but its not happening .
code #1
var app = angular.module("jsonService", ["ngResource"]);
app.factory("JsonFactory", function($resource,$cacheFactory) {
var cache = $cacheFactory('JsonFactory');
var url = "myurl?domain=:tabUrl";
var data = cache.get(url);
if (data==undefined) {
var retObj = $resource(url, {}, {
list: {
method: "GET",
cache: true
}
});
data = retObj;
cache.put(url, data);
};
return cache.get(url);
});
code #2
var app = angular.module("jsonService", ["ngResource"]);
app.factory("JsonFactory", function($resource) {
var url = "myurl?domain=:tabUrl";
console.log(url);
var retObj = $resource(url, {}, {
list: {
method: "GET",
cache: true
}
});
return retObj;
});
after both the code i wrote . when looking in to dev tools there always goes a XHR request in Network tab.
obviously : date does not changes . ( that's the whole point of caching )
After reading some of your responses, I think that what you are asking, is why does the network tab show a 200 response from your server, while using angular caching.
There are two caches. The first cache is angular's cache. If you see an xhr request in the network tab at all, then that means angular has decided that the url does not exist in its cache, and has asked the browser for a copy of the resource. Furthermore, the browser has looked in it's own cache, and decided that the file in its cache does not exist, or is too old.
Angular's cache is not an offline cache. Every time you refresh the browser page, angular's caching mechanism is reset to empty.
Once you see a request in the network tab, angular has no say in the server response at all. If you're looking for a 304 response from the server, and the server is not providing one, then the problem exists within the server and browser communication, not the client javascript framework.
A 304 response means that the browser has found an old file in its cache and would like the server to validate it. The browser has provided a date, or an etag, and the server has validated the information provided as still valid.
A 200 response means that either the client did not provide any information for the server to validate, or that the information provided has failed validation.
Also, if you use the refresh button in the browser, the browser will send information to the server that is guaranteed to fail (max-age=0), so you will always get a 200 response on a page refresh.
According to the documentation for the version of angular that you are using, ngResource does not support caching yet.
http://code.angularjs.org/1.0.8/docs/api/ngResource.$resource
If you are unable to upgrade your angular version, you may have luck configuring the http service manually before you use $resource.
I'm not exactly sure of syntax, but something like this:
yourModule.run(function($http)
{
$http.cache=true;
});
$cacheFactory can help you cache the response. Try to implement the "JsonFactory" this way:
app.factory("JsonFactory",function($resource,$cacheFactory){
$cacheFactory("JsonFactory");
var url="myurl?domain=:tabUrl";
return{
getResponse:function(tabUrl){
var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
var response=cache.get(tabUrl);
//if response is not cached
if(!response){
//send GET request to fetch response
response=retObj.list({tabUrl:tabUrl});
//add response to cache
cache.put(tabUrl,response);
}
return cache.get(tabUrl);
}
};
});
And use this service in controller:
app.controller("myCtrl",function($scope,$location,JsonFactory){
$scope.clickCount=0;
$scope.jsonpTest = function(){
$scope.result = JsonFactory.getResponse("myTab");
$scope.clickCount++;
}
});
HTML:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.js"></script>
<script src="js/ngResource.js"></script>
<body ng-app="app">
<div ng-controller="myCtrl">
<div>Clicked: {{clickCount}}</div>
<div>Response: {{result}}</div>
<input type="button" ng-click="jsonpTest()" value="JSONP"/>
</div>
</body>
Screenshot:
[EDIT] for html5 localStorage solution
JSBin Demo
.factory("JsonFactory",function($resource){
var url="ur/URL/:tabUrl";
var liveTime=60*1000; //1 min
var response = "";
return{
getResponse:function(tabUrl){
var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
if(('localStorage' in window) && window.localStorage !== null){
//no cached data
if(!localStorage[tabUrl] || new Date().getTime()>localStorage[tabUrl+"_expires"]) {
console.log("no cache");
//send GET request to fetch response
response=retObj.list({tabUrl:tabUrl});
//add response to cache
localStorage[tabUrl] = response;
localStorage[tabUrl+"_expires"] = new Date().getTime()+liveTime;
}
//console.log(localStorage.tabUrl.expires+"..."+new Date().getTime());
return localStorage[tabUrl];
}
//client doesn't support local cache, send request to fetch response
response=retObj.list({tabUrl:tabUrl});
return response;
}
};
});
Hope this is helpful for you.