所请求的资源上没有“ Access-Control-Allow-Origin”标头。 调用WebApi时出错

Question

When calling WebApi from my other project I am getting this error.

XMLHttpRequest cannot load http://localhost:64678/api/Employees/RetriveAllEmployees. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:49169' is therefore not allowed access. The response had HTTP status code 500.

I know CORS needs to enables in WebApi project. I have already added bellow code in my WebApi Project.

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

but still I am getting this error when calling WebApi from my other project.

I calling webapi like bellow.

        $("#getEmployees").on("click", function () {
            $.ajax({
                type: 'GET',
                url: 'http://localhost:64678/api/Employees/RetriveAllEmployees',
                success: function (data) {
                    debugger;
                },
                error: function (error) {
                    debugger;
                }
            });
        });

Not able to understand what is problem.

Answer 1

did you try to add to your webconfig?

 <system.webServer>
   <httpProtocol>
     <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Answer 2

You can try this also.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>

</httpProtocol>

Answer 3

I had tried everything I could find on the net including the methods that have been given on this answer. After almost trying to solve the problem for whole day I have found the solution that have worked for me like a charm.

in the file WebApiConfig in folder App_Start, comment all the lines of code and add the following code:

    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();
        var enableCorsAttribute = new EnableCorsAttribute("*",
                                           "Origin, Content-Type, Accept",
                                           "GET, PUT, POST, DELETE, OPTIONS");
        config.EnableCors(enableCorsAttribute);
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            //routeTemplate: "api/{controller}/{id}",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        config.Formatters.Add(new BrowserJsonFormatter());
    }

    public class BrowserJsonFormatter : JsonMediaTypeFormatter
    {
        public BrowserJsonFormatter()
        {
            this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            this.SerializerSettings.Formatting = Formatting.Indented;
        }

        public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
            base.SetDefaultContentHeaders(type, headers, mediaType);
            headers.ContentType = new MediaTypeHeaderValue("application/json");
        }
    }