Getting CORS error in AngularJS

Question

I am trying to hit an https based API, which is successfully working in POSTMAN and other REST client, but not in my AngularJS app.

Following is the code -

var req = {
    method: 'POST',
    url: 'https://agXXXXX.com/api/contact/',
    headers: {
        'Content-Type': undefined
    },
    data: user,
    withCredentials: true
};
$http(req)
    .then(function(data){
        console.log("--Data--");
        console.log(data);
    })

After following few stack CORS related article, I also included this in .config(), but no luck -

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.common = {Accept: "application/json, text/plain, */*"};
$httpProvider.defaults.headers.post = {"Content-Type": "application/json;charset=utf-8"};

Following is the error I am facing -

Let me know what I am doing wrong, or missing here.

Answer 1

If you just need test your app you can use this chrome plugin:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

But if you need this in production, you need config your server. If you are using SPRING:

HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST,PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type");
        chain.doFilter(req, res);

Answer 2

You should add in your server code headers to enable cors.

in this site you could read about it, and get code to implement it depending on the language in your backend:

http://enable-cors.org/