为什么Axios似乎没有接收到access-control-request-*头，即使它们正在发送？

Question

不幸的是，即使我在后端配置了所有的访问控制头（在AWS Api网关中），我仍然得到错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/internal/role. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

现在，我遇到的问题是，当用Postman对我的一个资源调用OPTIONS调用时（不是作为一个预先调用，而是作为一个“独立”调用），我收到了正确的访问控制头。但是，当用Axios发出相同的请求时，我似乎没有收到那些头，这使我认为这可能是Axios的问题。

以下是我在拨打OPTIONS电话时收到的邮递员邮件头：

 - Date: Fri, 26 Jun 2020 12:01:18 GMT
 - Content-Type: application/json
 - Content-Length: 0
 - Connection: keep-alive
 - x-amzn-RequestId: <some ID>
 - Access-Control-Allow-Origin: https://example-gui.com
 - Access-Control-Allow-Headers: Origin,Accept,Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with
 - x-amz-apigw-id: <some ID>
 - Cache-Control: max-age=600, s-maxage=600, proxy-revalidate
 - Access-Control-Allow-Methods: OPTIONS,POST
 - Access-Control-Allow-Credentials: true

 - cache-control: max-age=600, s-maxage=600, proxy-revalidate
 - content-length: 0
 - content-type: application/json

不幸的是，我没有关于实际POST调用返回的数据的信息，因为它只是抛出提到的异常。

Postman调用只是对相应URL的一个基本调用，使用OPTIONS方法，它只有一个额外的头（授权），所以我不打算进一步讨论。

Axios调用源自URL https://example-gui.com/#/,如下所示：

const fullResponse = (response: AxiosResponse) => response;

const backendRequests = {
   ...
  options: (url: string, header: {}) =>
    axios.options(url, header).then(fullResponse),
  ...
};

const loginRequests = {
  getUserRole: (accesstoken: string) =>
    backendRequests.options(
      "https://example.com/internal/role",
      { Authorization: `Bearer ${accesstoken}` }
    ),
};

try {
  await agent.loginRequests
    .getUserRole(this.accessToken)
    .then((response) => {
      console.log(response); // <-- Printing the results
      <...>
    });
} catch (error) {
  console.log(error);
}

我怎样才能在考虑到所有这些信息的情况下设法通过同源政策呢？

Answer 1

是否检查了是否正在从Axios发送access-control-allow-headersheader下从后端服务请求的所有头。可以将头的数量限制为access-control-allow-headers:Accept，content-type并检查CORS是否工作。

如果Access-Control-Allow-Origin使用*，则不能使用凭据。您必须指定协议+域+端口。

Access-Control-Allow-Origin通配符子域、端口和协议与凭据的源资源共享使用*太开放，会妨碍凭据的使用。因此进一步将http：//domain：port设置为允许起源头。