si usa Spring Boot, debe agregar el enlace de origen en la anotación @CrossOrigin

 @CrossOrigin(origins = "http://localhost:4200") @GetMapping("/yourPath")

Puede encontrar instrucciones detalladas en https://spring.io/guides/gs/rest-service-cors/

Todos ustedes son buenos en el lado Angular, incluso el cartero no plantea el problema de la política cors. Este tipo de problema se resuelve en el back-end en casos importantes.

Si está utilizando Spring boot, puede evitar este problema colocando esta anotación en su clase de controlador o en cualquier método en particular.

 @CrossOrigin(origins = "http://localhost:4200")

En caso de configuración global con arranque de resorte, configure las siguientes dos clases:

`

 @EnableWebSecurity @AllArgsConstructor public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override public void configure(HttpSecurity httpSecurity) throws Exception{ httpSecurity.csrf().disable() .authorizeRequests() .antMatchers("/api1/**").permitAll() .antMatchers("/api2/**").permitAll() .antMatchers("/api3/**").permitAll() } ` @Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry corsRegistry) { corsRegistry.addMapping("/**") .allowedOrigins("http://localhost:4200") .allowedMethods("*") .maxAge(3600L) .allowedHeaders("*") .exposedHeaders("Authorization") .allowCredentials(true); }

1: Cree una clase WebMvcConfig y extiéndala como se muestra desde WebMvcConfiguration y anule el método addCorsMappings .

2: Lo más importante es que no olvide convertirlo en la anotación @Configuration porque debe cargarse con la clase Main Spring para permitir Cross-Origin.

 @Configuration public class WebMvcCofig implements WebMvcConfigurer{ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/*") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*") .allowCredentials(true); } }

Startup.cs en WebAPI.

 app.UseCors(options => options.AllowAnyOrigin());

En el método ConfigureServices:

 services.AddCors(c => { c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin()); });

En el controlador:

 [HttpGet] [Route("GetAllAuthor")] [EnableCors("AllowOrigin")]

Sigue estos pasos

1. Agregar dependencia cors. escriba lo siguiente en cli dentro de su directorio de proyecto

npm install --save cors

2. Incluye el módulo dentro de tu proyecto

var cors = require('cors');

3. Finalmente, utilícelo como un middleware.

app.use(cors());

Solución 1: debe cambiar su backend para aceptar sus solicitudes entrantes

Solución 2: usar proxy Angular ver aquí

Tenga en cuenta que esto es solo para ng serve , no puede usar proxy en ng build

Solución 3: SI su backend acepta solicitudes de un dominio comodín como * .mydomain.com, entonces puede editar su archivo de hosts y agregar 127.0.0.1 local.mydomain.com allí, luego en su navegador en lugar de localhost:4200 ingrese local.mydomain.com:4200

Nota: la razón por la que funciona a través del cartero es que el cartero no envía solicitudes de verificación previa mientras que su navegador sí lo hace.

La solución necesita agregar estos encabezados a la respuesta del servidor.

 'Access-Control-Allow-Origin', '*' 'Access-Control-Allow-Methods', 'GET,POST,OPTIONS,DELETE,PUT'

Si tiene acceso al servidor, puede agregarlos y esto resolverá su problema

O

Puedes intentar concatenar esto delante de la url:

 https://cors-anywhere.herokuapp.com/

Para .NET CORE 3.1

Estaba usando la redirección https justo antes de agregar cors middleware y pude solucionar el problema cambiando el orden de ellos

Lo que quiero decir es:

cambia esto:

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { ... app.UseHttpsRedirection(); app.UseCors(x => x .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); ... }

a esto:

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { ... app.UseCors(x => x .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); app.UseHttpsRedirection(); ... }

Por cierto, permitir solicitudes de cualquier origen y método puede no ser una buena idea para la etapa de producción, debe escribir sus propias políticas de cors en producción.

Si su proyecto es un proyecto API .net Core 3.1.

actualice su Startup.cs en su proyecto .net core para:

 public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins"; // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddCors(options => { options.AddPolicy(MyAllowSpecificOrigins, builder => { builder.WithOrigins("http://localhost:53135", "http://localhost:4200" ) .AllowAnyHeader() .AllowAnyMethod(); }); }); services.AddDbContext<CIVDataContext>(options => options.UseSqlServer(Configuration.GetConnectionString("CIVDatabaseConnection"))); services.AddControllers(); } // 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.UseCors(MyAllowSpecificOrigins); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); }); } }

Si está utilizando spring-boot para la codificación del lado del servidor, agregue un filtro de servlet y agregue el siguiente código de su aplicación spring-boot. Deberia de funcionar. Agregar "Access-Control-Allow-Headers", "*" es obligatorio. No es necesario crear proxy.conf.json .

 @Component @Order(1) public class MyProjectFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Expose-Headers", "Content-Disposition"); response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS"); response.setHeader("Access-Control-Allow-Headers", "*"); response.setHeader("Access-Control-Max-Age", "86400"); chain.doFilter(req, res); } }

Para pruebas temporales durante el desarrollo, podemos desactivarlo abriendo Chrome con la seguridad web desactivada como esta.

Abra el terminal de la línea de comandos y vaya a la carpeta donde está instalado Chrome, es decir, C:\Program Files (x86)\Google\Chrome\Application

Ingrese este comando:

chrome.exe --user-data-dir="C:/Sesión de desarrollo de Chrome" --disable-web-security

Se abrirá una nueva ventana del navegador con la seguridad web deshabilitada. Úselo solo para probar su aplicación.

En mi caso, usando Angular y Spring Boot , resolví ese problema en mi SecurityConfig:

 http.csrf().disable().cors().disable() .authorizeRequests() .antMatchers(HttpMethod.POST, "/register") .anonymous() .anyRequest().authenticated() .and() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

O reemplace esa línea a:

 http.csrf().disable().cors().and()

Y otra opción de prueba es eliminar la dependencia de pom.xml y otro código depende de ello. Es como desactivar la seguridad de Spring:

 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> <version>2.3.3.RELEASE</version> </dependency>

Para nodejs use el siguiente código

 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

Si usa Spring boot 2, puede agregar la anotación CrossOrigin en la clase del controlador

 @CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)

funcionó para mí!

Cree una clase y agregue la siguiente configuración en la aplicación Spring Boot.

 package com.myapp.springboot.configs; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebMvcConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/*"). allowedOrigins("*"). allowedMethods("*"). allowedHeaders("*"). allowCredentials(true); } }

Hay tantas maneras de manejar el problema de los COR en el arranque de primavera, la forma más fácil es simplemente colocar la anotación @CrossOrigin en la parte superior del controlador que puede estar en su archivo ..resource java. Tratar

@CrossOrigin(origins= {"*"}, maxAge = 4800, allowCredentials = "false" @RestController

para obtener más información, lea los documentos de Spring Boot CORs. Gracias.

Intenté agregar la siguiente declaración en mi API en el servidor express y funcionó con Angular8.

 app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET , PUT , POST , DELETE"); res.header("Access-Control-Allow-Headers", "Content-Type, x-requested-with"); next(); // Important })

Si usa un nodo como backend, puede usar esto. Simplemente agregue estas líneas en el lado "API" de server.js en Node.js, antes de eso, asegúrese de instalar "cors"

 const express = require('express'); const app = express(); app.use(express.json()); var cors = require('cors'); app.use(cors());

Si está utilizando Angular con Dotnet Core:

En la clase Startup.cs

En el método ConfigureServices agregue:

 services.AddCors();

En el método Configurar agregar

 app.UseCors(options => options.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200"));

Probé todas las soluciones dadas anteriormente y trabajé mientras usaba el backend de nodejs, pero desafortunadamente mientras trabajaba con python no funcionó, así que terminé instalando un complemento Permitir CORS , al menos este complemento ayudó

En mi caso vi el error:

 Access to XMLHttpRequest at 'localhost:5000/graphql' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

Asegúrese de incluir un protocolo (http o https) en sus URL.

 const uri = 'http://localhost:5000/graphql'; //

• Si está utilizando la aplicación Spring Boot, simplemente agregue @CrossOrigin en su controlador e importe la declaración import org.springframework.web.bind.annotation.CrossOrigin; que configurar y ejecutar la aplicación de nuevo

API REST normal EN POLÍTICA JAVA CROS

 @GET @Path("getsample") @Produces(MediaType.APPLICATION_JSON) public Response getOptions() { Map<String,String> map=new HashMap<String,String>(); // map.put("response",res); map.put("name","Ajay"); map.put("id","20"); map.put("clg", "SLICA"); return Response.ok() .header("Access-Control-Allow-Origin", "*") .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS") .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With") .entity(map) .build(); }

Si por casualidad está utilizando fireBase como base de datos, necesita agregar ".json" al final del enlace, esto resolvió el problema para mí.

error principal: https://uar-test-bd448-default-rtdb.firebaseio.com/rules

SIN ERROR: https://uar-test-bd448-default-rtdb.firebaseio.com/rules.**json* *