Question

我在Angular 2中有一个简单的应用程序。我创建了http.service.ts：

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());
    }
}

然后我在app.component.ts中添加了一个简单的输入：

import {Component} from 'angular2/core';    
import {HttpService} from './http.service';    

@Component({
    selector: 'my-app',
    template: `
        <div>
            <div class="input">
                <label for="title">Title</label>
                <input type="text" id="title" #title>
            </div>
            <div class="input">
                <label for="body">Body</label>
                <input type="text" id="body" #body>
            </div>
            <div class="input">
                <label for="user-id">User ID</label>
                <input type="text" id="user-id" #userId>
            </div>
            <button (click)="onPost(title.value, body.value, userId.value)">Post Data</button>                
        </div>
       `,

    providers: [HttpService]

})
export class AppComponent {
    response: string;
    constructor(private _httpService: HttpService){}

    onPost(title: string, body: string, userId: string){
        this._httpService.createPost({title: title, body: body, userId: +userId})
            .subscribe(
                response => this.response = response,
                error => console.log(error)
            )
    }

}

在Java应用程序中，在我的UserController中创建一个带有@CrossOrigin注释的简单方法，并创建内部类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;
        }
    }

但是当我启动这两个应用并单击Post botton时 - 我有XMLHttpRequest cannot load和HTTP status code 403。我还需要做什么来发送POST？

Answer 1

您的Angular应用程序和Java应用程序是两个独立的应用程序。在经典架构中，后端应用程序不提供前端应用程序。

如果您的问题是如何将后端应用的网址提供给前端应用，则有几种策略。其中之一是使用应用程序捆绑器，例如Webpack并定义env变量。有关详细信息，请参阅此评论：https://github.com/AngularClass/angular2-webpack-starter/issues/386#issuecomment-192583352

无法从Angular2发送POST到Java

1 个答案: