CODEWITHSUNDEEP
javaangularspringspring-boot
JRM
JRM

Reputation: 27

Angular web app can't properly connect to my Spring Boot app API

This is what my console says upon running my Angular app (localhost:4200) –

Access to XMLHttpRequest at 'http://localhost:8090/api/orders' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED :8090/api/orders:1
ERROR HttpErrorResponse core.js:6210 
defaultErrorLogger @ core.js:6210

This is my API service in Angular Web app –

export class ApiService {

  constructor(private http: HttpClient) { }

  baseAPI = 'http://localhost:8090/api/';
  orderId: number;
  orderAdd = {} as Order;

  getOrderList(): Observable<any> {
    return this.http.get(this.baseAPI + 'orders');
  }
  
}

Here's my controller class in Spring Boot app API –

@RestController
@CrossOrigin(origins = "http://localhost:4200/")
@RequestMapping("/api")
public class OrderAndBillingController {

    @Autowired
    private OrderRepository orderRepo;
    @Autowired
    private CafeClerk clerk;

    public OrderAndBillingController(CafeClerk clerk) {
        this.clerk = clerk;
    }

    @GetMapping(path = "/orders", produces = "application/json")
    public List<Order> getOrderList(){
        List<Order> list = new ArrayList<Order>();
        orderRepo.findAll().forEach(al -> list.add(al));
        return list;
    }
    @PostMapping(path = "/add", produces = "application/json")
    public void addOrder(@RequestBody Order order){
        orderRepo.save(order);
    }
    @PutMapping(path = "/update", produces = "application/json")
    public void updateOrder(@RequestBody Order order){
        orderRepo.save(order);
    }
    @DeleteMapping(path = "/delete/{id}", produces = "application/json")
    public void deleteOrder(@PathVariable("id") Order order){
        orderRepo.delete(order);
    }
    @GetMapping(path = "/orders/regular-bill")
    public OrderBill getTotalRegularBill() {
        var listOrder = this.orderRepo.findAll();
        OrderBill bills = new RegularBill(this.clerk);
        bills.setOrderList(listOrder);
        return bills;
    }
    @GetMapping(path = "/orders/discounted-bill")
    public OrderBill getTotalDiscountedBill() {
        var listOrder = this.orderRepo.findAll();
        OrderBill bills = new DiscountedBill(this.clerk);
        bills.setOrderList(listOrder);
        return bills;
    }
}

Application class –

@SpringBootApplication
@ComponentScan({"com.company.ws"})
public class OrderBillingWsApplication {

    public static void main(String[] args) {
        SpringApplication.run(OrderBillingWsApplication.class, args);
    }
}

I did try all the possible annotations added in my Spring Boot app but still gives me an error. There are also previous threads with similar description as to my problem but the thread/s doesn't help at all or quite confusing to follow because there are classes that doesn't exist on mine on where would I put the suggested "code". Any help is appreciated!

Upvotes: 0

Views: 1055

Answers (2)

justthink
justthink

Reputation: 459

Very good question since it brings us this end / problem.

In a nutshell, http://localhost:4200 and http://localhost:4200/ are completely different, even though it pulls up the same page, or the same resource.

Your browser is complaining:

Access to XMLHttpRequest at 'http://localhost:8090/api/orders' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The frontend javascript is of origin 'http://localhost:4200'.

However, in your backend application, you configured @CrossOrigin(origins = "http://localhost:4200/").

Change it to @CrossOrigin(origins = "http://localhost:4200") or simply @CrossOrigin.

Upvotes: 0

Davi Carrano
Davi Carrano

Reputation: 499

According this message "This is what my console says upon running my Angular app (localhost:4200)", this is a CORS issue. You must configure, in your Springboot application, the CorsFilter, like this:

@Bean 
public CorsFilter corsFilter() { 
final UrlBasedCorsConfigurationSource source =     new UrlBasedCorsConfigurationSource();     
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config); return new CorsFilter(source);
 }

Upvotes: 1

Related Questions