我的 Angular 应用程序在 http://localhost:4200 上运行http://localhost:8080 上的端口和 Spring Boot港口。 当我从客户端发出请求时,出现此错误。
我尝试通过以下方式创建 header :
headers = new HttpHeaders({'Access-Control-Allow-Origin' : '*'})
然后像这样将 headers 变量放入 PUT 请求中:
this.http.put("//localhost:8080/save-account", accountForm,
{headers: this.headers}).subscribe(
res => console.log(res),
err => console.log(err)
)
但没有任何结果。
我的代码:
服务器端 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;
}
}
客户端 Typescript 文件。
Angular app.module.ts 文件:
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 注册组件 ts 文件:
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();
}
}
账户服务ts文件:
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)
)
}
}
注册组件html文件:
<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>
通过浏览器填写表格并发送数据后。我收到此错误。
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
请帮助我摆脱这个错误并解释为什么会这样。 提前致谢。
最佳答案
在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);
}
关于java - 带有 Angular 的 Spring Boot。从源 'http://localhost:8080/' 访问位于 'http://localhost:4200' 的 XMLHttpRequest 已被 CORS 策略阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53978113/