Question

我正在编写在Object.keys(event.queryStringParameters)[0]上运行的Angular应用。我也有一个运行在https://app.example.com:4202上的运行角度应用程序。它们都依赖于在https://app2.example.com:4203上运行的后端。

在每个后端php页面上，我都有一个测试，检查用户是否有权访问页面内容：

https://example.com

现在，问题来了。为了使ajax请求发送cookie信息，我需要将if(!isset($_SESSION["id"])){ http_response_code(403); die("Error. Unauthorized user."); }选项设置为withCredentials

但是，由于我的开发角度应用程序在4202上运行，并且Apache后端在443上运行，因此我还需要在每个php文件中设置true。那就是您不允许做的事情。我收到Ajax错误：header('Access-Control-Allow-Origin: *');

我还尝试在我的apache The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.虚拟主机中进行设置，并在php文件中删除了example.com：

header('Access-Control-Allow-Origin: *');

但是在这种情况下，ajax请求抱怨有一个错误：

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 merge  Vary "Origin"

所以我的问题是，如果您需要使用Cookie进行用户身份验证并且只想拥有一个版本的应用程序（包括角度版本和后端版本），该怎么办？问题似乎是angular应用程序在4202上运行，并且被认为与后端在443上运行的起源不同。请注意，此问题仅在开发期间发生，但是我真的很犹豫在本地安装1个版本机器和另一台服务器上。

Answer 1

除非您专门构建公共API，否则您绝对不希望对Access-Control-Allow-Origin使用通配符。

您需要做的就是指定应该允许的确切地址。将其视为所有应允许访问的网站的后端服务器白名单。在您的情况下，这是两个Angular网站。

因此将标题更改为此：

header('Access-Control-Allow-Origin: https://app.example.com:4202,https://app2.example.com:4203');

应该这样做。

在使用时，请将其添加到可重复使用的PHP包含中，因此无需在任何地方添加它。

修改

事实证明，您还需要第二个标头，以显式允许凭据。

header('Access-Control-Allow-Credentials: true');

这是必需的，因为您要传递凭据。每当服务和客户端不在同一服务器和主机上托管时，只要您想从浏览器调用Web服务，就需要使用我之前显示的Access-Control-Allow-Origin来源。

在开发模式下以Angular app和Access-Control-Allow-Origin发送Cookie

1 个答案: