C# WEB API und JavaScript Admin (CORS Fehler)

[Nyxero]

Hallo zusammen.

Ich habe mit C# ein Windows Service Programmiert.
Dieser Service übernimmt einige interne Aufgaben für die Verwaltung.
Gleichzeitig hostet dieser Service eine im Netzwerk zugängliche Homepage als WEB API.

Das funktioniert alles soweit auch prima. Ich kann von ein anderen Rechner im Netzwerk auf die Homepage zugreiften und mir Informationen holen. Nun habe ich angefangen ein Admin Tool zu bauen in Form einer HTML/JavaScript Homepage (vorgeschrieben).

Nachdem ich das HTML Gerüst fertig hatte, habe eine Methode getestet um mir die Informationen einer dieser APIs zu holen. Die Funktion sieht folgender maßen aus:

function getClientObjFromJson()
{
    var json = new XMLHttpRequest();
    json.open("GET", "http://192.168.1.103:48523");
    json.send();
    var text = "Status: " + json.status + " ReadState: " + json.readyState + " Text: " + json.response;
    console.log(text);
}

Als Antwort bekomme ich folgendes:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.103:48523/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Dann habe ich recherchiert was CROS ist und habe herausgefunden, dass ich bei dem API Host den Zugriff erlauben muss. Nachdem ich für mein Projekt endlich eine Lösung gefunden habe und diese Implementierte, musste ich zu dem Ergebnis kommen, das diese nicht funktioniert.

Meine Lösung in dem HostBuild:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddCors();
        }
        
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBrowserLink();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });

            app.UseCors(builder =>
            {
                builder.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
            });

Das sind zwei Methoden die Einstellungen an dem WEB-API Objekt vornehmen. Danach wird dieser gestartet.
Der Part:

            app.UseCors(builder =>
            {
                builder.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
            });

sollte vorerst alle Anfragen erlauben. Trotzdem laufe ich auf den gleichen Fehler.
Mir gehen so langsam die Ideen auch, also hoffe ich, dass mir hier evtl. jemand ein Tipp geben kann wie ich das Problem lösen könnte.

Ich bedanke mich jetzt schon mal für jede hilfreiche Antwort .

 

[Innensechskant]

Firewall ist aus?

 

[Nyxero]

Das habe ich noch nicht probieren können, ist aber schon mal ein schöner Ansatz.

Ergänzung (28. Juni 2017)

Ich sollte evtl. noch erwähnen, das ich beide Komponenten momentan noch Lokal teste. Also ist der Eingriff einer Firewall (der Windows Firewall) etwas unwahrscheinlicher.

Ergänzung (29. Juni 2017)

Also, soeben habe ich die Theorie mit der Firewall überprüft.
Leider hat dies nicht geholfen. Ich habe in den Log Files der Firewall rein
geschnuppert und dort wurde nichts blockiert.

Um auf nummer sicher zu gehen, habe ich die Firewall für ein kurzen Moment ausgestellt und habe das JavaScript erneut ausgeführt, leider ohne Erfolg.

 

[Innensechskant]

Schade, ich hab gedacht das Problem ließe sich so "einfach" beheben.
Beim Googlen bin ich auf folgende Seite gestoßen: Klick
Hast du das schon probiert?

 

[Nyxero]

Spezifisch diesen Post habe ich nicht getestet.
Ich werde mich mal rann setzen und mich wieder Melden.

Ergänzung (29. Juni 2017)

Den JavaScript Part habe ich nachgebaut.
Der Server Part bezieht sich leider auf eine PHP Anwendung (wenn ich mich nicht täusche).
Leider hat mir das nicht viel gebraucht, ausßer das die JavaScript Funktion jetzt etzwas schöner definiert ist.

Ich vermute, das der Server die Einstellungen nicht übernimmt. Ich versuche erneut, etwas durch das debuggen von dem Server zu erfahren.

 

[kling1]

hilft das eventuell? https://docs.microsoft.com/en-us/aspnet/core/security/cors
wie sieht der response header aus?

statt dem XMLHttpRequest kannst du auch einfach fetch verwendet.. sieht etwas sauberer aus

fetch('http://192.168.1.103:48523')
.then(response => response.json())
.then(json => {
  console.log(json)
})

und wenn du übelst der hipster sein willst dann auch mit async und await

;(async () => {
  const url = 'http://192.168.1.103:48523'
  const json = await (await fetch(url)).json()
  console.log(json)
})()

 

[Nyxero]

Ich habe soeben mit dem Debugger gespielt, konnte jedoch nichts feststellen.
Nun habe den FireFox Debugger für das JavaScript genutzt. Dabei ist er ebenfalls auf kein Fehler gestoßen.
Also habe ich mir unter "Network" mir die Header informationen geben lassen.
Die sehen so aus:


(nach dem abschicken von dem JavaScript).

Ich habe davon leider nicht so viel Ahnung. Vielleicht seht dir da ja ein Fehler?
Wenn ich dann auf die Seite mit dem "Titel" Response gehe, sehe ich sogar die Informationen die ich haben möchte.
Scheinbar is das JavaScipt drauf und drann die Informationen zu bekommen, jedoch wird es irgendwo blockiert.

Aus den Informationen von Wikipedia zu CORS kann ich nur entnehmen, dass es sich um ein Problem am Server handeln müsste.
Trotzdem finde ich es komisch, dass ich eine Antwort bekomme.

 

[kling1]

beim response header fehlt das Access-Control-Allow-Origin "*"..

 

[Nyxero]

Das ist komisch, denn ich habe den builder gesagt:

app.UseCors(builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});

Ergänzung (29. Juni 2017)

hilft das eventuell? https://docs.microsoft.com/en-us/aspnet/core/security/cors
wie sieht der response header aus?

Dein Link hat mir am Ende doch noch geholfen.
Ich habe scheinbar vergessen, das die nicht nur dem WEB Objekt die Rechte geben muss sondern den Controler ebenfalls.

Ich habe mein Quellcode um folgendes im Controller ergänzt:
[CODE]
    [Route("")]
    [EnableCors("AllowAll")] // Diese Zeile habe ich hinzugefügt.
    public class TimerController : Controller
    {
        public static List<Timer> timers = new List<Timer> { };

        // url:localhost:48523
        public IEnumerable<Timer> GetAllTimers()
        {
            return timers;
        }
    }

Und um auf nummer sicher zu gehen (global erlauben):

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddCors();

            // Diesen Block habe ich hinzugefügt.
            services.Configure<MvcOptions>(options =>
            {
                options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));
            });
        }

Danke noch mal an @kling1.