Question

我是使用Angular 2（以及一般的前端开发）的新手，我遇到了CORS的问题。基本上，我有两个HTTP服务器在运行 - 一个是我在端口4200上的localhost（运行应用程序的Angular 2 CLI服务器），另一个是端口8080上的WAMP服务器，它保存用于与远程SQL通信的PHP脚本服务器

我的问题是我在运行应用程序时遇到了与CORS相关的错误。我收到的最新错误是：

XMLHttpRequest cannot load http://localhost:8080/hvTool2_Ang2/src/app/php/pullData.php. Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

我已经尝试了以下方法，根据其他Stack Overflow问题和答案：

一个。将以下代码添加到我的http.conf for Apache（WAMP服务器），然后重新启动服务。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</IfModule>

B中。我在PHP中的echo语句之前添加了以下PHP代码：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

℃。我知道有些人建议在Chrome中关闭网络安全服务。我可以这样做，但我宁愿看到CORS正确实现。

我不太清楚这个预检是什么。根据我收集的内容，CORS预检仅在某些场合发送（非GET或非POST HTTP请求或/和具有选项定义的HTTP请求[如果我错了，请纠正我]）。另外，我想我的意思是回复这个CORS的预检 - 但我不确定是什么。

这是我的Angular 2代码：

getData(routing: string, functionindex: number, dataarray) {
    var sentData = JSON.stringify(dataarray);
    var sentArray = [routing, functionindex, sentData];
    var returnedJSON;
    var url;
    if (this.dev_env == true){
      url = this.devPHPfolderURL;
    }
    else{
      url = this.prodPHPfolderURL;
    }
    let headers = new Headers();
    //headers.append('Content-Type', 'application/json'); //CORS issue
    headers.append('Content-Type', 'text/plain'); //no CORS issue

    return this.http.post(url, sentArray)
        .subscribe(
            result => returnedJSON = result,
            () => console.log("Failed..."),
            () => console.log("Completed: " + returnedJSON)
        );
  }

这是执行命令并回显响应的PHP函数： function queryDB（$ query）{

$myServer = "SERVER"; //Actual variable answers were changed for this post.
$myUser = "USER";
$myPass = "PASS";
$myDB = "DATABASE"; 

// connection to the database
$connection = odbc_connect("Driver={SQL Server};Server=$myServer;Database=$myDB;", $myUser, $myPass) or die("Couldn't connect to SQL Server on $myServer");
$result = odbc_prepare($connection, $query);
odbc_execute($result)or die(odbc_error($connection));
odbc_close($connection);
odbc_fetch_array($result);

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

while ($info = odbc_fetch_array($result)) {
   $total[] = $info;
}

echo json_encode(odbc_fetch_array($total); //To send to JavaScript

}

修改奇怪的是，当我使用时：

headers.append('Content-Type', 'text/plain');

没有出现CORS问题。但是当我使用：

headers.append('Content-Type', 'application/json');

发生CORS问题。我需要将JSON对象返回给JavaScript。我做错了什么？

Answer 1

在Angular服务中使用不同的标题：

this.reqOpts = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }};

这会起作用，但我无法理解为什么在客户端有必要

Angular 2 + PHP：CORS预检问题

1 个答案: