After successfully setting up a ng-resource in my AngularJS project to fetch data from a REST API, everything was running smoothly in the development and testing environments, both of which operated over http. However, upon moving to production where the entire page is served via https, I encountered an issue with the REST requests failing due to a 'No 'Access-Control-Allow-Origin' header' error.
Despite configuring the resource with a relative path (e.g. /api/), it seems that AngularJS is automatically switching from https to http when making the request.
Queries:
- What could be causing the request to switch to http instead of staying on https even with the relative api urls?
- Is there any comprehensive Angular documentation available on handling https requests for
$httpor$resource? - Could this potential issue be related to server configuration settings with nginx? It appears that Angular is overriding the protocol automatically.
Error Message:
XMLHttpRequest cannot load http://www.example.com/api/data/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.
AngularJS Resource Setup:
.factory('Data', ['$resource',
function($resource){
return $resource('/api/data\\/', {}, {
query: {
url:'/api/data/',
method: 'GET',
isArray: true}
},
{ stripTrailingSlashes: false });
}])
Although I have whitelisted both http and https domains in the AngularJS project, the issue persists with the https requests.
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://www.example.com/**',
'https://www.example.com/**'
]);
})