除非更改端口号，否则 Angular 2 POST 到 Laravel Rest API 不会答案

【问题标题】：Angular 2 POST to Laravel Rest API doesnt unless port number is changed除非更改端口号，否则 Angular 2 POST 到 Laravel Rest API 不会
【发布时间】：2016-09-01 21:21:10
【问题描述】：

我已经制作了一个 laravel 和 angular 2 API - 它基本上是向 laravel 后端 API 发出一个 post 请求。当我从根文件夹运行 php artisan serve 并从公共文件夹运行 npm start 时，一切正常，公共文件夹通过端口 3000 提供服务，artisan 通过端口 8000 提供 api

这是我的服务文件使用默认工匠端口 8000 和 localhost 作为 API url 的外观

    import {Http, Headers, Response} from "@angular/http"
    import {Injectable} from "@angular/core"
    import {ICourse} from "../interfaces/ICourse"
    import 'rxjs/Rx';
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs/Observer';
    import 'rxjs/add/operator/share';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class Api {
        apiUrl: string = "http://localhost:8000/api/courses/";
        headers: Headers = new Headers;
        courses$: Observable<ICourse[]>;
        private _coursesObserver: Observer<ICourse[]>;
        private _dataStore: {
            courses: ICourse[]
        };

        constructor(private _http: Http) {
            this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
            this.headers.append('X-Requested-With', 'XMLHttpRequest');
            this.courses$ = new Observable<ICourse[]>(observer => this._coursesObserver = observer).share();        
            this._dataStore = { courses: [] };
        }

        public createCourse(course) {
            return new Promise((resolve, reject) => {
                this._http.post(this.apiUrl, course, {
                    headers: this.headers
                }).map((res: Response) => res.json()).subscribe(
                        (res) => {
                            resolve(res);
                            console.log('api succeeds');
                        },
                        (error) => {
                            alert('error');
                            reject(error);
                        }
                    );
            })
        }


    }

当我将 api url 更改为像 http://www.example.com/api/course 这样的完全限定域时，它不仅执行 GET 请求而不是 POST，而且它根本不执行任何操作...我通过源代码试图弄清楚到底是怎么回事，但我真的被难住了..有人遇到过这个吗？还要注意的是，我可以使用真实的域，但是我必须从不同的端口为 php artisan 提供服务

【问题讨论】：

标签： angularjs-directive angular laravel-5.2 angular2-services angular2-forms

【解决方案1】：

您是否将 apiUrl 属性更改为实时服务器的属性？您还需要一个令牌。您可以将 {{ csrf_field() }} 添加到包含 Angular 应用程序的页面顶部，但您需要它，就像 laravel 中的任何发布请求一样。我还没有真正深入研究在两个单独的服务器之间发送响应，但如果你要走这条路线，jwt 可能是诀窍。

不久前我写了一篇关于这个的小文章，它不是很详尽，但可以帮助check it out

【讨论】：