Grunt Connect CORS errors in browser

Question

I am trying to connect a small angular app to my rest webservice written in spring. My tomcat server is running on localhost:8080 and my grunt server is running on localhost:11000. This causes CORS errors in the console and I cannot make requests from my browser to the rest API.

I have spent all morning going through pretty much post I can find online and I still cannot get this working, I am able to get my pages served to me now as some examples even stop this from working. I do see console logging in the cmd window that the grunt server is writing to but no matter what I have tried I just keep getting the CORS error:

  connect: {
            livereload: {
                options: {
                  port: 11000,
                  hostname: 'localhost',
                  open: false,                                     
                  middleware: function(connect, options, middlewares) {                       
                        middlewares.unshift(function(req, res, next) {
                            console.log('***** ADDING HEADERS *****');
                            res.setHeader('Access-Control-Allow-Origin', '*');
                            res.setHeader('Access-Control-Allow-Credentials', true);
                            res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                            res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
                            next();
                        });

                        return middlewares;
                    }                                    
               }        
            } 
        }

Is anyone able to tell me how I can get around this problem?

berimbolo · Accepted Answer · 2016-04-07T11:00:45.133

Ok so it looks like the grunt config above does actually work. I had to make some amendments in spring to get this working.

I have never had to do this before as usually the requests to the back end API are sent from java and the front end app is also written in java and the requests go from browser >> tomcat\spring\java and then if this app needs to make rest calls to the backend it is then initiated from java which doesnt cause these issues.

Anyway here is an example of the fix for anyone that may get this issue when trying to call rest API's written in spring directly from an angular app running in a different container.

Configure the following in your configuration classes:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/calculator/*").allowedOrigins("http://localhost:11000");
        }
    };
}

This is also only for development and not wanting to have to deploy to apache webserver as I could probably have fixed this quite easily using http proxying, doing this means when I run my selenium tests I will be able to start the grunt server and deploy the angular app to that and still run all my integration tests during my automated build process.

Grunt Connect CORS errors in browser

1 Answers1