has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

Question

I am developing an integrated Java Backend (Rest Spring) with Angular Front 8. When trying to list the list of users(via JSON) I get this message:

Access to Xmlhttprequest at 'http://localhost:8080/contacts' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested Resource.

Imagery:

The repository: https://github.com/alexjosesilva/desafio-java-pl-apply

I created a config.js file to configure the proxy(front):

const proxy = [
  {
    context: '/api',
    target: 'http://localhost:8080'
  }
];
module.exports = proxy;

Code of the service.ts in which http request occurs:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class UserService {

  private baseUrl = 'http://localhost:8080/contatos';

  constructor(private http: HttpClient) { }

  getUser(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }
  createUser(user: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}`, user);
  }

  updateUser(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteUser(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

  getUserList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }
}

And I created a webMVCConfigureAdapter() class to enable back accesses:

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/**")
     .allowedOrigins("*")
     .allowedHeaders("*")
     .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "HEAD", "TRACE", "CONNECT");
    }
}

I used the notes: @Crossorigin in Contactource.java for a inhabit the access to json.

However the error still persists.

Contactource.java class package com.stefanini.contacts.Resource;

import java.util.List;

import javax.validation.Valid;

import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.stefanini.contatos.model.Contato;
import com.stefanini.contatos.repository.Contatos;


@RestController
@RequestMapping("/contatos")
public class ContatosResource {


    @Autowired
    private Contatos contatos;


    @PostMapping
    public Contato adicionar(@Valid @RequestBody Contato contato) {
        return contatos.save(contato);
    }

    @CrossOrigin
    @GetMapping
    public List<Contato> listar() {
        return contatos.findAll();
    }


    @GetMapping("/{id}")
    public ResponseEntity<Contato> buscar(@PathVariable Long id) {
        Contato contato = contatos.findOne(id);

        if (contato == null) {
            return ResponseEntity.notFound().build();
        }

        return ResponseEntity.ok(contato);
    }


    @PutMapping("/{id}")
    public ResponseEntity<Contato> atualizar(@PathVariable Long id, 
            @Valid @RequestBody Contato contato) {
        Contato existente = contatos.findOne(id);

        if (existente == null) {
            return ResponseEntity.notFound().build();
        }

        BeanUtils.copyProperties(contato, existente, "id");

        existente = contatos.save(existente);

        return ResponseEntity.ok(existente);
    }


    @DeleteMapping("/{id}")
    public ResponseEntity<Void> remover(@PathVariable Long id) {
        Contato contato = contatos.findOne(id);

        if (contato == null) {
            return ResponseEntity.notFound().build();
        }

        contatos.delete(contato);

        return ResponseEntity.noContent().build();
    }
}

Research

1. Enabling Cross in spring boot
2. Spring and Cross
3. Acesso_cors

Answer 1

Another solution would be for you to record the origins, as follows:

• Within com.stefanini.contatos.config create a class WebConfig.java
• Enter the following code:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");// <- assim permite de qualquer origem, troque "/**" pelo seu dominio por exemplo "http://meudominio.com"
    }
}

You can also specify which verbs are allowed, see:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("GET", "POST", "PUT");
    }
}

Answer 2

Create a file called Corsfilter.java in com.stefanini.contatos.config
Inside this file enter the following code:

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author emanuel
 *
 */
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods",
                "ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Key, Authorization");
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    public void init(FilterConfig filterConfig) {
        // not needed
    }

    public void destroy() {
        // not needed
    }

}

Run the project again to see if you fixed or changed the error. If the error persists it should be in front-end.
So just inspecting to make sure you are passing correctly all the necessary headers.

Answer 3

can try like this

@Configuration
@EnableWebSecurity
public class SecutiryConfig extends WebSecurityConfigurerAdapter {

    private static final String[] PUBLIC_MATCHERS = { "/h2-console/**", "/swagger-ui.html" };

    @Autowired
    private Environment env;


    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration().applyPermitDefaultValues();
        configuration.setAllowedMethods(Arrays.asList("POST", "GET", "PUT", "DELETE", "OPTIONS"));
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}