web-dev-qa-db-ja.com

Angularを使った春のブーツ。 Origin 'http：// localhost：4200'から 'http：// localhost：8080 /'でのXMLHttpRequestへのアクセスがCORSポリシーによってブロックされました

私のAngularアプリケーションは http：// localhost：42 ポートで実行されており、Spring Bootは http：// localhost：808 ポートで実行されています。クライアント側からリクエストをPUTすると、このエラーが発生します。

私は次のようにしてヘッダーを作成しようとしました：

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

そして、次のようにヘッダー変数をPUTリクエストに入れます：

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

しかし、何もうまくいきませんでした。

私のコード：

サーバー側コントローラー：

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

このエラーを解消して、なぜそれが起こっているのか説明してください。前もって感謝します。

javaangularspring-boot
4
Tigran Fahradyan

リンクの2つのエラー（http:ではなくsave-accountおよびupdate-accountなし）：

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

リンクは

 http://localhost:8080/update-account
0
Nikhil