After facing a similar issue, I discovered that the solution lies in including specific HTTP headers in the response of the receiving entity:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

It is advisable to use the domain name of the sender instead of *. For example, *.example.com

Implementing this approach requires access to the server configuration.

Utilize the resource service for consuming flickr JSONP data:

var MyApplication = angular.module('MyApplication', ['ng', 'ngResource']);

MyApplication.factory('flickrImages', function ($resource) {
    return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});

MyApplication.directive('masonryLayout', function ($parse) {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
        }
    };        
});

MyApplication.directive('masonryItemElement', function () {
    return {
        restrict: 'AC',
        link: function (scope, elem, attrs) {
            elem.imagesLoaded(function () {
               elem.parents('.masonry').masonry('reload');
            });
        }
    };        
});

MyApplication.controller('GalleryController', function ($scope, flickrImages) {
    $scope.galleryItems = flickrImages.load({ tags: 'cats' });
});

Template:

<div class="masonry-layout: 240;" ng-controller="GalleryController">
    <div class="masonry-item" ng-repeat="item in galleryItems.items">
        <img ng-src="{{ item.media.m }}" />
    </div>
</div>

The reason for this problem is due to the security measure implemented by web applications known as the Same Origin Policy. This policy allows scripts from one website to access information on another website only if both websites share the same origin, including host, protocol, and port.

To address the CORS header issue, there are several solutions available:

1. Using a Proxy - One solution is to set up a proxy that makes requests appear as if they are coming from the same origin. For example, if using nodeJS, the cors-anywhere package can be used for this purpose. More information can be found at 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);
   });
   

2. JSONP - JSON with Padding (JSONP) is a technique for sending JSON data without encountering cross-domain issues. Instead of using XMLHttpRequest, it utilizes the <script> tag. More details can be found at https://www.w3schools.com/js/js_json_jsonp.asp.

3. Server-Side Changes - On the server side, cross-origin requests need to be enabled. Preflighted requests, which send an HTTP OPTIONS request header to the target resource, determine whether the actual request is safe to send. Custom headers may need to be set in the request, such as X-PINGOTHER.

   If utilizing Spring, the following code snippet can help resolve the issue by allowing all origins:

   @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("*");
               }
           };
       }
   }
   

   For Spring Security users, the following configuration can be added along with the previous code snippet:

   @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();
       }
   
   }
   

Responding to my own query.

Resolving CORS issue with angular js + restEasy on POST

After exploring various options, I stumbled upon a workaround: Interestingly, Internet Explorer behaves differently by sending a direct POST request instead of initiating a preflight request for permission. I am still puzzled by why the filter failed to handle an OPTIONS request and sent default headers not specified in the filter (it appears to be an override specific to that scenario...perhaps a restEasy quirk).

To address this, I implemented an OPTIONS route in my rest service that manipulates the response to include the necessary headers using response header manipulation.

I am actively seeking a more elegant solution if anyone has encountered a similar challenge.

Encountering a similar issue, I found the problem to be with the backend setup. In my case, I was using a Node server with Express. The frontend (Angular) was sending a GET request like this:

   onGetUser(){
        return this.http.get("http://localhost:3000/user").pipe(map(
            (response:Response)=>{
                const user =response.json();
                return user;
            }
        )) 
    }

This resulted in an error, which you can see here.

The backend code using Express without headers initially looked like this:

app.get('/user',async(req,res)=>{
     const user=await getuser();
     res.send(user);
 })

The issue was resolved by adding a header to the method:

app.get('/user',async(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
    const user=await getuser();
    res.send(user);
})

More information on enabling CORS for Node JS can be found here.

This response provides insight into two creative solutions for working around APIs that do not support CORS:

• Utilize a CORS Proxy
• If the API allows, employ JSONP

One method involves using 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 additional details, visit:

• GitHub: CORS Anywhere

Alternatively, leverage JSONP if supported by the API:

 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

Apache/HTTPD is a common presence in many enterprises and homes using CentOS, making it easy to set up a proxy for adding necessary CORS headers.

If you're struggling with this process, I have written a blog post on the topic here. The key step involves adding the following code snippet to your /etc/httpd/conf/httpd.conf file:

<VirtualHost *:80>
    <LocationMatch "/SomePath">
       ProxyPass http://target-ip:8080/SomePath
       Header add "Access-Control-Allow-Origin" "*"
    </LocationMatch>
</VirtualHost>

This configuration ensures that requests to URLs under your-server-ip:80/SomePath are routed to , which lacks CORS support. By including the correct Access-Control-Allow-Origin header, these requests can interact effectively with your web application.

You also have the flexibility to adjust ports and target the entire server instead of just SomePath if needed.

        var result=[];
        var app = angular.module('app', []);
        app.controller('myCtrl', function ($scope, $http) {
             var url="";// insert your request URL here    
             var request={};// insert your request parameters here
             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 include the following code in your WebApiConfig file:            
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

To implement CORS in the frontend, one can utilize the ngResource module for AngularJS. It is crucial to include the following code snippet when sending AJAX requests from the controller:

$scope.weatherAPI = $resource(YOUR API,
     {callback: "JSON_CALLBACK"}, {get: {method: 'JSONP'}});
 $scope.weatherResult = $scope.weatherAPI.get(YOUR REQUEST DATA, if needed);

Additionally, remember to include the ngResource CDN in the scripts section and specify it as a dependency in the app module.

<script src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>

Lastly, ensure to add "ngResource" in the dependencies list of the app module

var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);