Cuando puedo enviar una petición POST al servidor me sale un error:

Failed to load http://localhost:8181/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

El backend está escrito en Java de la Primavera.
Mi método para crear una prueba:

createTest() {
    const body = JSON.stringify({
      'description': 'grtogjoritjhio',
      'passingTime': 30,
      'title': 'hoijyhoit'
    });

    const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      )
    };

    return this._http.post(`${this._config.API_URLS.test}`, body, httpOptions)
      .subscribe(res => {
        console.log(res );
      }, error => {
        console.log(error);
    });
  }

Método Get funciona, pero después no. Ambos trabajan en la Arrogancia y el Cartero. He cambiado el método POST muchas veces. Los encabezados en mi código no funciona, pero he resuelto el problema con ellos la expansión de Google Chrome. Sólo había un error:

Response for preflight has invalid HTTP status code 403.

A mí me parece que esto no es Angular problema. Por favor, dime cómo yo o mi amigo (quien escribió el backend) puede resolver este problema.

  • Se puede compartir el chrome red ficha completa aquí encontrarás los detalles de lo que le ayudará a ver que las cabeceras correspondientes son procedentes o no?

3 Comentarios

  1. 5

    PROBLEMA :

    Para cualquier Origen Cruzado petición POST, el navegador primer intento de hacer una llamada de OPCIONES y, si y sólo si la llamada tiene éxito, va a hacer el verdadero POST de la llamada. Pero en su caso, las OPCIONES de llamada falla porque no hay 'Access-Control-Allow-Origin' encabezado de respuesta. Y, por tanto, la llamada no será hecho.

    SLOUTION :

    Así que para que esto funcione se necesita para agregar CORS de Configuración en el lado del servidor para configurar los encabezados necesarios para la solicitud de Origen Cruzado como :

    • response.setHeader("Access-Control-Allow-Credentials", "true");
    • response.setHeader("Access-Control-Allow-Headers", "content-type, if-none-match");
    • response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
    • response.setHeader("Access-Control-Allow-Origin", "*");
    • response.setHeader("Access-Control-Max-Age", "3600");
    • No sé por qué este perro byte mí muchas veces. Y sin embargo, yo siempre te olvidas de que es «EN LA RESPUESTA» encabezados donde se establece el CORS atributos. Si usted en el formulario «SOLICITUD» encabezados seguirá teniendo problemas…
    • Pasa a lo mejor de nosotros.
  2. 2

    Usted necesita para asegurarse de que la Primavera aceptar CORS solicitudes

    También si se han aplicado Spring security & requieren autorización encabezados por ejemplo para su API, a continuación, (sólo si es necesario para hacer que la aplicación soporte CORS) debe excluir las OPCIONES de llamadas de autorización en su primavera archivo de configuración de seguridad.

    Será algo como esto:

    @Configuration
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    
      @Override
      protected void configure(HttpSecurity http) throws Exception {
    
      @Override
      public void configure(WebSecurity web) throws Exception {
        //Allow OPTIONS calls to be accessed without authentication
        web.ignoring()
            .antMatchers(HttpMethod.OPTIONS,"/**")

    Nota:

    De la producción, probablemente es mejor usar proxy inverso (como nginx) & no permitir que los navegadores para llamar a su API directamente, en ese caso, no es necesario para permitir que las OPCIONES de llamadas como se muestra arriba.

  3. 1

    He tenido el mismo problema con Angular últimamente. Esto ocurre debido a que algunas de las solicitudes son el desencadenamiento de las comprobaciones de las solicitudes, por ejemplo. PATCH, DELETE, OPTIONS etc. Esta es una característica de seguridad en los navegadores web. Se trabaja a partir de Arrogancia y de Cartero, simplemente porque no implementar esta característica. Para habilitar CORS solicitudes en Primavera tiene que crear un bean que devuelve WebMvcConfigurer objeto. No te olvides de @Configuration en caso de que hayas cometido una clase extra para ello.

        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                            .allowedHeaders("*");
                }
            };
        }

    Por supuesto, usted puede ajustar esto a sus necesidades.

Dejar respuesta

Please enter your comment!
Please enter your name here