Web API的$ http角向给出XMLHttpRequest错误-请求的资源上没有'Access-Control-Allow-Origin'标头

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);

                });

        }

Answer 1

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("*", "*", "*"));

    }
}

Answer 2

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);

}

Answer 3

have u enabled CORS? and add something like:

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