Question

除了PHP（可能有效，但到目前为止未经测试），下面的所有代码似乎都有效。我的问题是我在尝试访问本地主机服务器上的PHP文件时遇到404错误。

我正在使用Lite-Server，但我也尝试使用XAMPP来查看问题是否与服务器本身有关，但无论如何我都得到了404.

我也试过使用绝对和相对网址，我的帖子请求无济于事。当我检查Chrome开发工具网络标签中的帖子标题时，数据也会按预期显示，因此数据正在尝试发布。

为什么浏览器无法找到PHP文件？

我的代码

表单组件：

constructor(private fb: FormBuilder, private databaseService : DatabaseService) {    

    this.quoteForm = fb.group({
        'firstName': [null, Validators.required,],
        'lastName': [null, Validators.required],
        'email': [null, Validators.required],
        'phone': [null, Validators.required],
        'company': [],
        'country': ['United States'],
        'address1': [],
        'address2': [],
        'city': [],
        'state': [""],
        'zip': [],
        'prefContact': [""],
        'referral': [""],
        'queryType': [""],
        'companyType': [""],
        'message': [null, Validators.required]
    });
}

onSubmit(value: Object) {

    if(this.quoteForm.invalid) {
        this.formValid = false;
    }
    else {
        this.formValid = true;          
        this.submitted = true;
        this.databaseService.postForm(value)
                            .subscribe(
                                data => value,
                                error => this.errorMessage = <any>error
                            );
    }
}

发布服务

private _url: string = "/db/quote-form.php";

constructor(private _http: Http) {}

postForm(data: any) {
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });
    let body = JSON.stringify(data);

    return this._http.post(this._url, body, options)
                          .map(this.extractData)
                          .catch(this.handleError)
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
}

private handleError(error: Response | any) {
    let errMsg: string;
    if(error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }

    console.error(errMsg);
    return Observable.throw(errMsg);
}

PHP：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

$formData = json_decode(file_get_contents('php://input'));

foreach ($formData as $key=>$value) {
    $_POST[$key]=$value;
}

$formObject = $_POST['firstName'];
$formObject = $_POST['lastName'];
$formObject = $_POST['email'];
$formObject = $_POST['phone'];
$formObject = $_POST['company'];
$formObject = $_POST['country'];
$formObject = $_POST['address1'];
$formObject = $_POST['address2'];
$formObject = $_POST['city'];
$formObject = $_POST['state'];
$formObject = $_POST['zip'];
$formObject = $_POST['prefContact'];
$formObject = $_POST['referral'];
$formObject = $_POST['queryType'];
$formObject = $_POST['companyType'];
$formObject = $_POST['message'];
$formObject = $_POST['images'];

echo $formObject['firstName'];

顺便说一句，GET请求可以正常工作，但POST不会。

Answer 1

显然我没有正确测试XAMPP服务器，因为它确实有效。 Lite-Server本身并不设置为运行PHP，因此我的PHP文件被视为普通文本。我知道回想起来会很明显。

所以总结一下那些陷入类似问题的穷人：

如果您正在使用本地服务器（如Lite-Server）并且您正在构建一个需要在后端发布到PHP文件的角度应用程序，但您的帖子返回404错误，则问题可能是服务器本身。要么切换到像XAMPP这样的东西，要么找到一种方法让Lite-Server将PHP作为代码执行。

如果您在开发环境中使用自动将TypeScript转换为JS（例如TSC）的服务，您仍然可以运行它来监视和转换文件，同时运行本地服务器的XAMPP（或类似的东西）。当我同时使用Lite-Server运行TSC时，我不得不编辑我的package.json。

这个问题是迄今为止我使用Angular2遇到的最痛苦和最困难的问题，我觉得它非常需要文档。

当我从Angular2应用程序发布到PHP时，为什么会出现404错误？

1 个答案: