Spring boot with Angular. Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:4200' has been blocked by CORS policy

Question

My Angular application is running on http://localhost:4200 port and Spring Boot on http://localhost:8080 port. When I PUT request from client side I get this error.

I tried to create headers by doing:

headers = new HttpHeaders({'Access-Control-Allow-Origin' : '*'})

and then put headers variable in PUT request like this:

this.http.put("//localhost:8080/save-account", accountForm, 
{headers: this.headers}).subscribe(
      res => console.log(res),
      err => console.log(err)
)

But nothing worked out.

My code :

Server side controller:

package com.tigran.chagmo.controllers;

import com.tigran.chagmo.models.AccountRepository;

import java.util.Collection;

import com.tigran.chagmo.entities.Account;

import org.springframework.beans.factory.annotation.Autowired;
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;

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

    @Autowired
    AccountRepository accRepo;

    @PutMapping("/update-account")
    public Account putAccount(@RequestBody Account account){
        accRepo.save(account);
        return account;
    }

}

Client side Typescript files.

Angular app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LinksService } from './links/links.service';
import { FormsModule } from '@angular/forms';
import { AccountService } from './account-service/account.service';
import { HttpClientModule } from '@angular/common/http';

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'sign-up',
    component: SignUpComponent
  },
  {
    path: '**',
    component: NotFoundComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NotFoundComponent,
    SignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    LinksService,
    AccountService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular sign-up component ts file:

import { Component, OnInit } from '@angular/core';
import { LinksService } from '../links/links.service';
import { AccountService } from '../account-service/account.service';

@Component({
     selector: 'app-sign-up',
     templateUrl: './sign-up.component.html',
     styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {

constructor(private links: LinksService, 
        private accountService: AccountService) { }

getHome(){
     this.links.getHome();
}

save(accountForm: any){
     this.accountService.update(accountForm);
}

ngOnInit(){
     this.accountService.getAll();
}
}

Account service ts file:

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

@Injectable({
  providedIn: 'root'
})
export class AccountService {

   constructor(private http: HttpClient) { }

   getAll(){
     return this.http.get("//localhost:8080/accounts")
   }

   getOne(id: number){
     return this.http.get("//localhost:8080/account/"+id);
   }

   update(accountForm: any) {
     this.http.put("//localhost:8080/save-account", 
   accountForm).subscribe(
       res => console.log(res),
       err => console.log(err)
   )
 }
}

Sign-up component html file:

  <form #accountForm="ngForm" (ngSubmit)="save(accountForm.value)" class="text-center border border-light p-5" >
    <label for="gmail" >Gmail</label>
    <input 
    ngModel name="gmail"
    id="gmail" 
    class="form-control mb-4" 
    tpye="text" >
    <label for="name" >Name</label>
    <input 
    ngModel name="name"
    id="name" 
    class="form-control mb-4" 
    tpye="text" >
    <label for="username" >Username</label>
    <input 
    ngModel name="username"
    id="username" 
    class="form-control mb-4" 
    tpye="text" >
    <label for="password" >Password</label>
    <input 
    ngModel name="password"
    id="password" 
    class="form-control mb-4" 
    tpye="text" >
    <label for="repeat-password" >Repeat password</label>
    <input 
    ngModel name="repeat-password"
    id="repeat-password"
    class="form-control mb-4" 
    tpye="text" >
    <button [disabled]="!accountForm.valid" class="btn btn-info btn-block my-4" >Sign up</button>
    <p class="text-left" >Already have an account? <a routerLink="{{ getHome() }}" class="text-primary text-right">Log in</a></p>
  </form>

After filling the form via browser and sending data. I get this error.

 Failed to load resource: the server responded with a status of 403 ()

 Access to XMLHttpRequest at 'http://localhost:8080/save-account' 
 from origin 'http://localhost:4200' has been blocked by CORS 
 policy: Response to preflight request doesn't pass access control 
 check: No 'Access-Control-Allow-Origin' header is present on the 
 requested resource.

 HttpErrorResponse
     error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 
     0, total: 0, type: "error", …}
     headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, 
     headers: Map(0)}
     message: "Http failure response for (unknown url): 0 Unknown Error"
     name: "HttpErrorResponse"
     ok: false
     status: 0
     statusText: "Unknown Error"
     url: null
     __proto__: HttpResponseBase

Please help me to get rid of this error and explain why is it happening. Thanks in advance.

Chamod Pathirana · Accepted Answer · 2019-05-12 11:14:13Z

7

Add this code in Application.java

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

answered May 12, 2019 at 11:14

Chamod Pathirana

7588 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sheraz Ahmed · Accepted Answer · 2020-01-15 18:34:39Z

3

This worked for me. I just added this bean to a WebConfig Spring class that extended through WebMvcConfigurationSupport. And here the imports for me.

import org.springframework.web.filter.CorsFilter; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.cors.CorsConfiguration;

answered Jan 15, 2020 at 18:34

Sheraz Ahmed

714 bronze badges

Comments

Nikhil · Accepted Answer · 2018-12-30 14:12:45Z

2

Two errors in the link (no http: and save-account instead of update-account):

this.http.put("//localhost:8080/save-account", accountForm, 
{headers: this.headers}).subscribe(
      res => console.log(res),
      err => console.log(err)
)

The link should be

 http://localhost:8080/update-account

answered Dec 30, 2018 at 14:12

Nikhil

1,25615 silver badges28 bronze badges

4 Comments

Tigran Fahradyan Over a year ago

I had in the code @GetMapping("/save-account"), then changed it to "/update-account" and forgot to change the client side code. However it worked without "http:" and headers. can you explain me the difference between "loclahost:8080" and "//loclahost:8080" and putting headers or not please?

Nikhil Over a year ago

The purpose of headers is to provide information about the incoming request to the server. For example: Content-Type(text, json, or html), Authorization, Access method, etc. If you specify these requirements on your server then the requestor will have to send the appropriate headers. As for the http: or without. I am not sure how it worked. I am assuming the this.http took care of it. I have had issues with the protocol when I set up my Angular application with https. Then all my URL had to use https.

Nikhil Over a year ago

Use Postman before to check if your server application is work well and according to your settings. getpostman.com

bogdan.rusu Over a year ago

I guess the safest way is to explicitly mention in Angular's http method what protocol you want to use (http/https). I had the same issue because I did not mention it and thought was a Spring issue. It's not intuitive as when you have http.get for example you expect Angular to take care of appending the protocol.

Nimasha Madhushani · Accepted Answer · 2022-11-05 13:05:38Z

0

By putting HTTP methods in a list as below, you can solve your problem. Add this code to the Application.java file.

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    final CorsConfiguration config = new CorsConfiguration();

    config.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    config.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS", "DELETE", "PUT", "PATCH"));
    config.setAllowCredentials(true);
    config.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));

    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);

    return source;
}

answered Nov 5, 2022 at 13:05

Nimasha Madhushani

3252 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Spring boot with Angular. Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:4200' has been blocked by CORS policy

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related