No 'Access-Control-Allow-Origin' header - Springboot

Question

I get following error when I am try to access my springboot restservice:

"Failed to load http://localhost:8080/Lerneinheit: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 403."

I googled a lot and added this to my RestController class: "@CrossOrigin(origins = "http://localhost:8081")"

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/Lerneinheit")
public class LerneinheitController {

    @Autowired
    LerneinheitRepository lerneinheitRepository;


    @RequestMapping(method=RequestMethod.GET)
    public List<Lerneinheit> getAllLerneinheiten(){
        List<Lerneinheit> lerneinheiten = new ArrayList<Lerneinheit>();
        for(Lerneinheit l : lerneinheitRepository.findAll())
            lerneinheiten.add(l);

        return lerneinheiten;
    }

and this is my jQuery code to access the data:

var data = {}
    data["query"] = $("#query").val();

    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "http://localhost:8080/Lerneinheit",
        data : JSON.stringify(data),
        dataType : 'json',
        timeout : 100000,
        success : function(data) {
            console.log("SUCCESS: ", data);

        },
        error : function(e) {
            console.log("ERROR: ", e);

        },
        done : function(e) {
            console.log("DONE");
        }
    });

The server is running on port 8080 and my client page is running with "gulp-live-server": "0.0.31" on port 8081.

I tried a lot and it would be really cool if somebody could help me.

cheers, JohnRamb0r

*The response had HTTP status code 403* — that’s the problem you need to fix. See https://en.wikipedia.org/wiki/HTTP_403. That 403 response means some other part of your server code is forbidding accessing to the `/Lerneinheit` path. And adding `@CrossOrigin` to that Java class will not fix that problem. You need to fix it in some other code on the server side before that part of your application code. The only reason you’re seeing mention of `Access-Control-Allow-Origin` in that browser message is because your server — like most servers — doesn’t add application-set headers to 4xx responses. — sideshowbarker, Jan 11 '18 at 22:59

sid · Answer 1 · 2018-01-11T23:13:06.810

-1

There are various way to solve this cross-domain request problem: link

One of many ways is to use JSONP something like below in your case:

$.ajax({
    url: http://localhost:8081/Lerneinheit,
    dataType: "jsonp",
    jsonp: "callback",
    success: function( response ) {
        /* fetch the response and do the processing */

        };
    }
});

Remove - @CrossOrigin(origins = "http://localhost:8081")

edited Jan 11 '18 at 23:13

answered Jan 11 '18 at 23:02

sid

1
2

Thank you for your answer. I changed my code to this and now I am getting this error: "script.js:1 GET http://localhost:8080/Lerneinheit?callback=jQuery32105720927869960035_1515756837595&{}&_=1515756837596 net::ERR_ABORTED" – JohnRamb0r Jan 12 '18 at 11:35
JSONP works for GET method. I didn't notice the above one is for post, my bad.Try adding "Allow-control-Allow-origin" chrome plugin, assuming you are using chrome as client for sending the request and add back @CrossOrigin(origins = "localhost:8081") Also,here is the [link](https://spring.io/guides/gs/rest-service-cors/) of similar example that you are trying to achieve. – sid Jan 13 '18 at 05:31

No 'Access-Control-Allow-Origin' header - Springboot

1 Answers1