CORS issue on localhost while calling REST service from angularjs

Question

I am learning angularJS and trying to implement it in my application.

I have an RESTful WCF service hosted on localhost IIS. It has a GET method defined to fetch a l

Answer 1

If you are facing CORS issue in AngularJS applications while accessing REST API running in localhost machine check the following: Add the CORS Filter in your server application. In my case, I have added the below code in Spring application

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {

private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);

public SimpleCORSFilter() {
    log.info("SimpleCORSFilter init");
}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {

    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;

    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

    chain.doFilter(req, res);
}

@Override
public void init(FilterConfig filterConfig) {
}

@Override
public void destroy() {
}

}

In angularjs code, don't give URL like http://localhost:8080/../. Instead of localhost give your host IP number.

It will work properly

Answer 2

I struggled for way too long with CORS issues caused by the interaction of an emulated Ionic project (running locally) with some small Node.JS web services (also running locally).

Behold the short easy workaround : Chrome's plugin AllowControlAllowOrigin.

https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions

Just switch the radio button from red to green, and no more blocked request, error or warning ! Of course it's a temporary solution and you may have to put your hands in your request headers when the time to stop the local tests will come. In the meantime, that's a great way to avoid loosing time on those anoying recurrent issues.

Answer 3

I could resolve this issue. Couple of ways to do so - I am jotting down all that i have tried and their references.

Answer to Ques1.

'Why is localhost or my machineName considered to be a cross-domain request?'

as @charlietfl mentioned and i Researched here: a different port or subdomain is also consider cross domain by browser.

Answer to Ques2.

'Are there any changes required to do at my service end to enable this behavior?'

YES! the change is required on server end itself. The server should respond to the request with

Access-Control-Allow-Origin: *

header. Here the * could be replaced with the request header itself or as per your application requirement. Excellent blog here explaining the workaround if you're using WCF REST Service. You need to add following line (headers) to each your service method to enable CORS in your service methods.

WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Methods", "POST"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Headers", "Content-Type, Accept");

A specification here is very helpful for enabling CORS on server / client.

Answer to Ques3.

JSONP mostly works for GET requests and aren't most advisable use ,rather enabling CORS is most recommended. (I haven't explored this area much but Wiki & stackoverflow article here were very descriptive).

Apart from that, for testing purpose, a nice chrome extension here can be helpful. It can be used to assure that the application has CORS issues.