CORS ISSUE using angular4

0
votes

I am working with angular 4 app. I am facing CORS issue.

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:4200' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can anyone help me how to resolve this issue on local and live?

3
angularcors
Edited spelling and formatting – Dijkgraaf

3 Answers

0
votes

This is a back problem, you need to set in the back response the 'Access-Control-Allow-Origin' header to * or set it to your front domain.

0
votes
    You can use CORS extension in chrome

    https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

    after adding just toggle it and reload the page.


Or you can use xdomain library

Create a proxy.html on your server having below content

<html>
<head>
    <script src="xdomain.min.js" data-master="*"></script>
</head>
<body></body>
</html>

// In script src tag give path of your "xdomain.min.js" 

And in client side add xdomain.min.js file in your index.html file and add below snippet to index.html file


 xdomain.slaves({
     "http://serverIp:serverPort": "/contextPathIfAny/proxy.html"
 });
0
votes

You don't need to add any Chrome extensions. Just add the below line of code and it will work. This will sort out the No 'Access-Control-Allow-Origin' header issue.

@CrossOrigin(origins = "http://localhost:4200")