Nike No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm trying to get the current men clearance shoes from the Nike store site using Angulars $http request and display it on my own site.

 $http({
        method: 'GET',
        url: 'http://store.nike.com/html-services/gridwallData?country=US&lang_locale=en_US&gridwallPath=mens-clearance-shoes/'
    }).then(function successCallback(response) {
        console.log('success',response);
    }, function errorCallback(response) {
        console.log('error',response);
    }); 

However, it gives me this error.

XMLHttpRequest cannot load http://store.nike.com/html-services/gridwallData?country=US&lang_locale=en_US&gridwallPath=mens-clearance-shoes/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I know its a Cross-origin resource sharing issuse. Is there any way to by pass this? And also can I legally display their clearance products on my site?

Answer 1

Add this

   myApp.config(['$httpProvider', function($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
    ]);