1

I have written and angular js program where I am doing a get Request and trying to fetch a resource from a spring Boot rest service. But I am getting this error :

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

In Angular Js :

ctrl.js 

(function(){
"use strict";
angular.module("app")
.controller("chatCtrl",function($scope,$http){
    $scope.name = "ujjawal";
    $scope.usermessages = [];
    $scope.botmessages = [];
    $scope.onSend = onSend;

    function onSend(){
        var usersegment = {
            "text":this.msg
        }
        this.msg = "";
        this.usermessages.push(usersegment);
        $http.get("http://localhost:8080/messages/").then(function(response){
            console.log(response.data);
            var botsegment = {
                "id":response.data.id,
                "text":response.data.text
            }
            $scope.botmessages.push(botsegment);
        });
    }
});

})();

In Spring Boot :

MessagesController

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MessagesController {
    private int id = 0;

    @RequestMapping("/messages")
    public Messages getMessages(){
        id+=1;
        return new Messages(Integer.toString(id),"Bot is replying hi");
    }
}

Messages.java

public class Messages {
    private String id;
    private String messages;

    public Messages(String id, String messages) {
        this.id = id;
        this.messages = messages;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getMessages() {
        return messages;
    }

    public void setMessages(String messages) {
        this.messages = messages;
    }
}

It looks like I need to pass a header "Access-Control-Allow-Origin" but I don't know how. I saw a lot of sites and docs but didn't get it. Please help.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
xpioneer
  • 3,075
  • 2
  • 16
  • 18
  • This is not duplicate to How to enable CORS in AngularJs. It's specific to Spring applications. Please see the accepted answer. – xpioneer Feb 11 '18 at 17:52

1 Answers1

3

You should add a @CrossOrigin annotation to your RestController, like so:

@RestController
@CrossOrigin("*")
public class MessagesController {

This will enable CORS requests from all hosts (*). You might want to restrict it so specific hosts only, e.g. @CrossOrigin(origins="http://angularjs:8080")

Background: If your AngularJS app is asking your browser to send a request to a host:port that is different from the one that serves the AngularJS app (say angularjs:8080), the browser will first ask the host:port if it allows CORS from angularjs:8080. If, as in your case, the HTTP response of your RestController does not contain the appropriate CORS headers, the browser will reject the request made by your app.

This is explained nicely in this Spring Getting Started guide: https://spring.io/guides/gs/rest-service-cors/

dnswlt
  • 2,925
  • 19
  • 15