Kann nicht POST von Angular2 zu Java

Question

senden habe ich eine einfache Anwendung in Angular 2. Ich http.service.ts erstellt:

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Observable} from "rxjs/Observable"; 
import 'rxjs/Rx'; 
import {Headers} from "angular2/http"; 

@Injectable() 
export class HttpService { 
    constructor(private _http: Http){} 

    createPost(post: {title: string, body: string, userId: number}): Observable<any>{ 
     const body = JSON.stringify(post); 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-urlencoded');  
     return this._http.post('http://localhost:8080/au', body, { 
      headers: headers 
     }).map(res => res.json()); 
    } 
} 

Dann habe ich in app.component.ts einfache Eingaben mit einem botton:

Und in Java App erstellen Sie eine einfache Methode in meinem UserController mit @CrossOrigin Annotation und erstellen innere Klasse Post.

@CrossOrigin(origins = "http://localhost:3000") 
    @RequestMapping(value = "/au", method = RequestMethod.POST) 
    public ResponseEntity<Void> au(@RequestBody Post post){ 
     System.out.println(post.getBody() + " " + post.getTitle() + " " + post.getUserId()); 

     return new ResponseEntity<Void>(HttpStatus.OK); 
    } 


    public class Post { 
     private String title, body; 
     private int userId; 

     public String getTitle() { 
      return title; 
     } 

     public void setTitle(String title) { 
      this.title = title; 
     } 

     public String getBody() { 
      return body; 
     } 

     public void setBody(String body) { 
      this.body = body; 
     } 

     public int getUserId() { 
      return userId; 
     } 

     public void setUserId(int userId) { 
      this.userId = userId; 
     } 
    } 

Aber wenn ich beide Apps starten, und klicken Sie Botton Post - Ich habe XMLHttpRequest cannot load und HTTP status code 403. Was muss ich sonst tun, um POST zu senden?

Answer 1

Ihre Angular-App und Java-App sind zwei separate Anwendungen. In einer klassischen Architektur stellt die Back-End-Anwendung keine Front-End-Anwendung bereit.

Wenn Ihre Frage ist, wie Sie die URL der Back-End-App in das Front-End bereitstellen, gibt es mehrere Strategien. Eine davon ist die Verwendung eines App-Bundlers für beispielsweise Webpack und die Definition von env-Variablen. Siehe diesen Kommentar für weitere Informationen: https://github.com/AngularClass/angular2-webpack-starter/issues/386#issuecomment-192583352