CODEWITHSUNDEEP
asp.netreactjsasp.net-corecorsidentityserver4
p.durga shankar
p.durga shankar

Reputation: 1217

CORS issue in IdentityServer 4

I'm using IdentityServer 4 as oauth for my application ( Reactjs ) I'm running Identityserver on port http://localhost:5000 and reactjs app on http://localhost:3000. I have tried using CORS for my idenityserver4 with the following code.

    public void ConfigureServices(IServiceCollection services)
    {
   
        services.AddIdentityServer(options =>
        {
            options.Events.RaiseSuccessEvents = true;
            options.Events.RaiseFailureEvents = true;
            options.Events.RaiseErrorEvents = true;
        })
            
            .AddClientStore<ClientStore>()
            //.AddInMemoryApiResources(Config.GetApiResources())
            .AddResourceStore<ResourceStore>()
            //.AddInMemoryClients(Config.GetClients())
            .AddCustomUserStore()
           .AddCertificateFromFile();

        
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.WithOrigins( "http://localhost:3000/")
                .AllowAnyMethod()
                .AllowAnyHeader());
        });


    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment environment)
    {
        
        
        app.UseForwardedHeaders();
        if (environment.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseCors("CorsPolicy");
        //app.UseCors("default");
        app.UseIdentityServer();

        app.UseStaticFiles();
        // uncomment, if you want to add an MVC-based UI
        app.UseMvcWithDefaultRoute();
    }
}

Even though I have added localhost:3000 in WithOrigins(), when I try to make a request from react app with axios I'm getting the following blocked error. enter image description here

Can someone help me to know where I'm doing wrong. I need my application to only allow some list of origins (apps) Thanks

Upvotes: 0

Views: 1354

Answers (2)

Gustav W
Gustav W

Reputation: 19

If you are sending a request to another domain, try sending a http request from your identity server not react.js app. I encountered a similar issue but i just used my API as a proxy and it worked fine.

Upvotes: 1

Oliver
Oliver

Reputation: 9002

It's likely this could be because of the trailing slash, this is mentioned in the documentation.

Note: The specified URL must not contain a trailing slash (/). If the URL terminates with /, the comparison returns false and no header is returned.

Try http://localhost:3000 instead of http://localhost:3000/.

I'd also question the usage of both .AllowAnyOrigin() and .WithOrigins(). What you're looking to achieve should be possible using only .WithOrigins().

Upvotes: 2

Related Questions