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

问题: 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 tri...

问题:

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.


回答1:

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
  • 发表于 2019-01-02 05:14
  • 阅读 ( 13371 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除