上载文件时withCredentials不起作用

时间:2018-10-24 16:57:31

标签: angular

我的后端检查用户是否有权使用以下代码上传资源:

<?php
if(!isset($_SESSION["id"])){
    http_response_code(401);
    die("Error. Unauthorized user.");  
} 

要使其正常工作,开发在angular.example.com:4200上运行的角度应用程序需要将会话cookie跨域发送到example.com。我通常通过在发送请求时启用{withCredentials:true}来做到这一点。由于某些原因,当使用以下代码上传文件时,此操作将无效:

//no cookies sent in this example   

import { HttpClient, HttpEventType } from '@angular/common/http';


//function
const fd = new FormData();
for (let i = 0; i < files.length; i++) {
  let file = files[i] as File;
  fd.append("myfile[]", files[i], files[i].name);
}
this.httpClient.post("https://example.com/upload.php", fd, { reportProgress: true, observe: "events", withCredentials: true }).subscribe((event) => {
   console.log(event);
// show upload progress code here
});

服务器响应:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://angular.example.com:4200
Cache-Control: no-store, no-cache, must-revalidate
Connection: close
Content-Length: 25
Content-Type: text/html; charset=UTF-8
Date: Thu, 25 Oct 2018 13:29:04 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Server: Apache/2.4.33 (Unix) OpenSSL/1.0.2n PHP/7.2.4 mod_perl/2.0.8-dev Perl/v5.16.3
Set-Cookie: PHPSESSID=9e03dc7c6c6a3ccd4d1d87a1af135b86; path=/
Vary: Origin
X-Powered-By: PHP/7.2.4

请求:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US
Access-Control-Request-Method: POST
Connection: keep-alive
Host: example.com
Origin: https://angular.example.com:4200
User-Agent: useragenthere

在这种情况下,不发送任何cookie,但是如果我改用此代码,则不会正常发送它们:

//cookies are successfully sent
for (let i = 0; i < files.length; i++) {
  let file = files[i] as File;
  fd.append("myfile[]", files[i], files[i].name);
}
this.httpClient.post("https://example.com/upload.php", fd, { withCredentials: true }).subscribe((event) => {});

似乎多余的选项与withCredentials混在一起。我该怎么做才能解决此问题?


这是我在example.com虚拟主机中的apache指令,该指令处理所有子域和端口的CORS:

SetEnvIf Origin ^(https?://.+\.example\.com(?::\d{1,5})?)$   CORS_ALLOW_ORIGIN=$1
Header append Access-Control-Allow-Origin  %{CORS_ALLOW_ORIGIN}e   env=CORS_ALLOW_ORIGIN
Header append Access-Control-Allow-Credentials true
Header merge  Vary "Origin"

0 个答案:

没有答案