Angular $http to Web Api gives error of XMLHttpRequest -No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have read many questions and answers regarding Angular $http data service calling into another application Web Api. Yes I seen that some people say the reason "Postman" is allowed in is because its like 3rd party external app etc..

In the past I did have control of the Web Api in which i installed CORS etc..

However, I am thinking that something has to be POSSIBLE as several stackoverflow question and answers did indeed have answers that were giving me HOPE

Here is the error

XMLHttpRequest cannot load http://localhost:60127/api/Product/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60128' is therefore not allowed access.

Project with Web Api code

 public class ProductController : ApiController
 {
    // GET api/<controller>
    public IHttpActionResult Get() {
    IHttpActionResult ret = null;
    // ....
 }

URL of Web api (works with Postman) http://localhost:60127/api/Product/

Angular code

function productList() {
            //http://localhost:60127/api/Product/
            //dataService.get("/api/Product")
            dataService.get("http://localhost:60127/api/Product/")
                .then(function (result) {
                    vm.products = result.data;    // result is an http status
                    debugger;   // stop to see the code 
                },
                function (error) {
                    handleException(Error);

                });

        }

I don't want to duplicate but your answer is here. http://stackoverflow.com/a/27504439 — LCarter, Aug 19 '16 at 06:33

score 2 · Answer 1 · answered Aug 19 '16 at 06:17

In WebAPiConfig Class you need to enable Cors while registering WebAPiConfig

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        config.EnableCors(new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*"));

    }
}

Jekin Kalariya · Answer 2 · 2016-08-19T06:14:32.150

0

If you have different origin for server and client , you need to set Access-Control-Allow-Origin header to true on server side,

response.getHttpHeaders().add("Access-Control-Allow-Origin", "*"); // will alow reuest from all API

So if you are using filter you can do like this

 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);

}

edited Aug 19 '16 at 06:14

answered Aug 19 '16 at 06:00

Jekin Kalariya

3,475
2
20
32

If postman can call it, it seems that there has to be a way to send in the headers to force it to work... right ? – Aug 19 '16 at 06:06
Actually as per cross origin pocily we need to define header at server side to allow other domain to use service, This is required only if you have diffrent port or IP for server and client – Jekin Kalariya Aug 19 '16 at 06:13

score 0 · Answer 3 · answered Aug 19 '16 at 06:13

0

have u enabled CORS? and add something like:

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ProductController : ApiController
{
   .....
}

answered Aug 19 '16 at 06:13

XDProgrammer

853
2
14
31

Angular $http to Web Api gives error of XMLHttpRequest -No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers3