如何设置“Access-Control-Allow-Credentials”标头以 Angular 4 上传文件？

Question

我正在开发 Angular 4 应用程序，其中，我需要在表单提交时上传文件，为此我使用 ng2-file-upload 插件。但是我在上传文件时遇到了问题。我正在创建一个upload.php 文件来完成上传过程。 upload.php 如下：

header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(array('status' => false));
  exit;
}

$path = 'uploads/';

if (isset($_FILES['file'])) {
$originalName = $_FILES['file']['name'];
$ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
$generatedName = md5($_FILES['file']['tmp_name']).$ext;
$filePath = $path.$generatedName;

if (!is_writable($path)) {
  echo json_encode(array(
    'status' => false,
    'msg'    => 'Destination directory not writable.'
   ));
   exit;
 }

if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
   echo json_encode(array(
     'status'        => true,
     'originalName'  => $originalName,
     'generatedName' => $generatedName
   ));
 }
}
else {
  echo json_encode(
    array('status' => false, 'msg' => 'No file uploaded.')
  );
 exit;
 }

但我收到以下错误：

未能加载http://localhost/uploads/uploads.php：响应 预检请求未通过访问控制检查： 响应中的“Access-Control-Allow-Credentials”标头是“” 当请求的凭据模式为“包含”时，必须为“真”。 因此，Origin 'http://localhost:4200' 不允许访问。这 XMLHttpRequest 发起的请求的凭证模式是 由 withCredentials 属性控制。

如果有任何帮助，请建议我，提前谢谢！

Answer 1

这是浏览器安全问题，而不是 Angular。当你进行跨域AJAX请求时，如果你想发送cookies（基本上就是授权信息），浏览器要求你指定Access-Control-Allow-Credentials和true，表示外部域允许这样做。这两个标头的原因是，一个站点可能允许来自另一个域的 AJAX 请求，但可能他们不希望该域在浏览器中使用任何潜在的授权 cookie。

作为这种风险的一个例子，您可以编写一个应用程序来通过 AJAX 访问 Facebook 的 API。但是，如果 Facebook 允许您发送浏览器中可能存在的 cookie，您就可以像经过身份验证的用户一样进行发布，这当然是不允许的。通过阻止发送现有的 cookie，用户应该必须向您的应用提供他们的 Facebook 凭据才能以他们的名义做某事。

作为此检查的补充，如果 Access-Control-Allow-Origin 设置为“*”，则通过 XMLHttp 发送 cookie 也不起作用。必须明确添加域，以确保您不会授予对潜在危险网站的访问权限。