How to enable CORS in AngularJs

Question

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 amp api key 3f807259749363aaa29c76012fa93945 amp tags india amp format json amp 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

User · Answer

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

}
```

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   gt                   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   gt        const user await getuser         res send user         After adding a header to the method problem was solved  app get   user  async req res   gt       res header  Access-Control-Allow-Origin             const user await getuser        res send user        You can get more details about Enabling CORS on Node JS

User · Answer

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    lt script src  https   code angularjs org 1 2 16 angular-resource js  gt  lt  script gt    Then use  ngResourse  in the app module dependency section  var routerApp   angular module  routerApp     ui router    ngResource

User · Answer

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     lt VirtualHost   80 gt       lt LocationMatch   SomePath  gt         ProxyPass http   target-ip 8080 SomePath        Header add  Access-Control-Allow-Origin           lt  LocationMatch gt   lt  VirtualHost gt    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

User · Answer

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    lt div class  masonry  240   ng-controller  MasonryCtrl  gt       lt div class  masonry-item  ng-repeat  item in photos items  gt           lt img ng-src     item media m       gt       lt  div gt   lt  div gt

User · Answer

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   x000D   x000D  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                  x000D   lt script src    unpkg com angular angular js  gt  lt  script gt   lt body ng-app  app  gt     Response     response    lt  body gt  x000D   x000D   x000D   For more information  see  GitHub  CORS Anywhere   Use JSONP if the API supports it   var url    quot   api ipify org  quot    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

[javascript] How to enable CORS in AngularJs

Examples related to javascript

Examples related to angularjs

Examples related to xmlhttprequest

Examples related to cors