0

meanwhile thank you very much to anyone who will help me. I'm creating an application similar to netflix, and I'm having a problem; I cannot in any way enable CORS correctly, (my frontend created with React and my web API has been created with entity framework core 5). Isn't it that I wrote something wrong in the Startup.js of .net core or in the .env file of react? the variables I setted in my .env file, have been setted according to the Postman address, where among other things the petitions work perfectly, the thing I can't understand is this, it seems like everything works fine but at the same time I can't see anything. In any case, I attach below the startup.cs file and the .env file in order to make you understand what I have written and possibly to fix my errors.

This is my Startup.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi.Models;
using microsquare.Context;
using microsquare.Services;
using microsquare.MiddleWares;
using Newtonsoft.Json;

namespace microsquare
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {

            services.AddControllers(config =>
            {
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                config.Filters.Add(new AuthorizeFilter(policy));
            }).AddNewtonsoftJson(options => options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
            );
            services.AddScoped<IUserDataService, UserDataService>();
            services.AddCors(p =>
            {
                p.AddPolicy("MyPolicy",
                    builder =>
                    {
                        builder.AllowAnyHeader()
                            .WithOrigins("http://127.0.0.1:5000")
                            .WithMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS").Build(); 
                    });
            });
            
            var key = Encoding.ASCII.GetBytes(Configuration.GetValue<string>("SecretKey"));
            services.AddAuthentication(options =>
            {
                options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
            }).AddJwtBearer(options =>
            {
                options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
                {
                    IssuerSigningKey = new SymmetricSecurityKey(key),
                    ValidateLifetime =  true,
                    ValidIssuer = "",
                    ValidAudience = "",
                    ValidateAudience = false,
                    ValidateIssuer = false,
                    ValidateIssuerSigningKey= true
                };
            });
            
            //services.AddDbContext<ApiAppContext>(options => options.UseInMemoryDatabase("AppDB"));
            services.AddDbContext<ApiAppContext>(options => options.UseSqlServer(@"Data Source=DESKTOP-CF92CDJ;Initial Catalog=microsquare; Integrated Security=SSPI;"));
            
            services.AddResponseCaching();
            
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo
                {
                    Version = "v1",
                    Title = "microsquare",
                    Description = "An ASP.NET Core Web API",
                    TermsOfService = new Uri("https://example.com/terms"),
                    Contact = new OpenApiContact
                    {
                        Name = "Alessandro Reina",
                        Email = string.Empty,
                        Url = new Uri("https://github.com/rei83/"),
                    },
                    License = new OpenApiLicense
                    {
                        Name = "Use under LICX",
                        Url = new Uri("https://example.com/license"),
                    }
                });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                //app.UseDeveloperExceptionPage();
                app.UseExceptionHandler("/error");
                
            } 
            else {
                    
            }
            
            app.UseSwagger(c =>
                {
                    c.SerializeAsV2 = true;
                });
                app.UseSwaggerUI(c =>
                {
                    c.SwaggerEndpoint("/swagger/v1/swagger.json", "microsquare v1");
                });
            
            
            app.UseHttpsRedirection();
            
            app.UseRouting();

            app.UseCors();
            
            app.UseResponseCaching();

            app.UseAuthentication();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                app.UseStatusMiddleWare();
            });
        }
    }
}

This, instead, is my .env.example file that I made in my Ract app:

# Environmental Variables - EXAMPLE

REACT_APP_API_URL=http://localhost:5000
REACT_APP_API_USER=http://localhost:5000

The thing that I really cannot understand, then, is that in the console of my browser, apparently no error appears but when, in the "index.js" file of my React app I try to dispatch one of the categories "contained" within my API, as I said, nothing appears in the Redux tab of my browser.

This is my simple index.js file:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import "./styles/styles.scss"
import store from './redux/store'
import { Provider } from 'react-redux'
import {getAllDocumentaries, getAllKids} from './redux/actionCreators'


store.dispatch(getAllDocumentaries)
store.dispatch(getAllKids)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root'));

Thanks in advance to anyone who will help me

Greetings

Alessandro

1 Answers1

0

try to replace your CORS code with this:

 services.AddCors(o => o.AddPolicy("MyPolicy",
                    builder =>
                    {
                       builder.WithOrigins("http://localhost:5000")
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));
.....

    app.UseCors("MyPolicy");

Serge
  • 40,935
  • 4
  • 18
  • 45