Access-Control-Allow-Origin error when using Owin

Asked By: Anonymous

I’m have a aurelia client and a webserver. When i use localhost and i’m running on the same machine it works fine.

But when i want to access the server from another machine the page loads but the api calls give the following error:
No Access-Control-Allow-Origin header is present on the requested resource.

I’m using owin and to my undestanding i need to enable CORS for owin.

I did the follwing in my startup class:-

UPDATE
I have updated my class with input from Nenad but is still get the same error.
Below i have added the call from the client.

 public void Configuration(IAppBuilder app)
        {

            this.container = new Container();
            // Create the container as usual.
            container.Options.DefaultScopedLifestyle = new AsyncScopedLifestyle();

            // Register your types, for instance using the scoped lifestyle:
            container.Register<IWebDeps, WebDeps>(Lifestyle.Singleton);

            // This is an extension method from the integration package.
            container.RegisterWebApiControllers(GlobalConfiguration.Configuration, Assembly.GetExecutingAssembly());

            container.Verify();

            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            // Configure Web API for self-host. 
            var config = new HttpConfiguration()
            {
                DependencyResolver =
                new SimpleInjectorWebApiDependencyResolver(container)
            };

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

            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
            //// Custom Middleare
            app.Use(typeof(CustomMiddleware));
            app.UseWebApi(config);

            //New code:
            app.Run(context =>
            {
                context.Response.ContentType = "text/plain";
                return context.Response.WriteAsync("Hello, world.");
            });
        }   

My main program is calling the startUp class:-

  using (Microsoft.Owin.Hosting.WebApp.Start<Startup>("http://localhost:8080"))
            {
                Console.WriteLine("Press [enter] to quit...");
                Console.ReadLine();
            }

Client code, 192.168.178.23 is the ip from the server.

let baseUrl2 = "http://192.168.178.23:8080/api/status/getStatus";
    getStatus() {
        return this.client.get(baseUrl2)
            .then(response => {
                return this.parseJSONToObject(response.content);
        });
    }

The error in Chrome:

XMLHttpRequest cannot load
http://192.168.178.23:8080/api/status/getStatus. No
‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘http://localhost:9000‘ is therefore not allowed
access. The response had HTTP status code 400.

Cors should be enabled now right? But i still get the error when doing a api call. Am i missing any steps? Our is this approah wrong?

Any suggestions are welcome!

Solution

Answered By: Anonymous

Turns out that when starting OWIN the adres should be http://*:8080. Instead of local host.