Angular 2 + PHP:CORS预检问题

时间:2016-10-12 00:26:53

标签: php apache angular cors wamp

我是使用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。我做错了什么?

1 个答案:

答案 0 :(得分:0)

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

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

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