Aurelia HttpClient.Fetch可从Auth0获取令牌，但在Postman中工作正常

当我使用邮递员时，我可以很容易地将不记名代币退回。然而，当使用Aurelia时，我收到一个状态200，唯一的响应是OK。我看到请求方法仍然是可选的。我在Chrome控制台中看到：

Failed to load https://------.auth0.com/oauth/token: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

但是，从我在回复中看到的标题和我看到的一切看起来都在那里

以下是我从邮递员那里得到的信息：

Response: Status 200 OK
JSON:
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGci...{shortened for brevity}",
"expires_in": 86400,
"token_type": "Bearer"
}

以下是来自Aurelia的代码：

private getToken() {
    var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
    this.http.fetch('https://kimberlite.auth0.com/oauth/token', {
        credentials: 'omit',
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': 'http://localhost:3000/'
        },
        mode: 'cors',
        method: 'post',
        body: JSON.stringify(postData)
    }).then(result => result.json())
        .then(data => {
            localStorage.setItem('api_access_token', data.access_token);
            localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
        });
}

我已经搜索过了，但没有找到任何能帮助我通过考试的东西。我错过了什么？非常感谢您的帮助

在阅读了Jesse下面的评论之后，我删除了“Access Control Allow Origin”的标题，并收到了相同的200 OK。但是，在谷歌Chrome源代码“localhost:3000”中接收错误；因此不允许访问。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源

在阅读了其他问题之后，我尝试删除所有标题，并收到一个401unhorized，其响应为{{{error:access\u denied，error\u description:Unauthorized}

好的，我刚刚在Firefox中试过，只使用了“Content Type”标题，收到了预期的响应。Chrome有什么我需要注意的地方吗？

您不应该在请求上设置access control allow origin标头。在CORS请求中，服务器端点需要在您的OPTIONS请求响应上设置此标头

跨源资源共享的工作方式是，客户端首先对服务器终结点进行选项调用。服务器终结点应配置为使用CORS，并具有允许的源列表，或仅使用*来允许所有源。然后在响应此选项请求时，服务器将设置访问控制允许-来源：https://localhost:3000 指示允许来源地发出请求。您也可以在响应中看到这一点：

然后，客户端继续对同一端点进行GET或POST调用，并实际检索/存储数据

在您的情况下，如果您使用Aurelia fetch客户端发出请求，则不需要设置头来执行此操作。您只需执行以下操作：

private getToken() {
    var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
    this.http.fetch('https://kimberlite.auth0.com/oauth/token', {
        credentials: 'omit',
        headers: {
            'Content-Type': 'application/json'
        },
        mode: 'cors',
        method: 'post',
        body: JSON.stringify(postData)
    }).then(result => result.json())
        .then(data => {
            localStorage.setItem('api_access_token', data.access_token);
            localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
        });
}

---

Jesse，首先我想说谢谢你回答的细节…解释帮助填补了我的一些空白。不幸的是，当我删除标题时没有任何变化。我尝试了太多的方式来移动代码，结果我只得到了一个200 OK only…或者一个401 unauthorized当我移动相同的代码时，比如说如果我有广告我再次感谢您提供的详细信息，它们非常有用。但是，不幸的是，它没有改变任何事情。还有其他想法吗？如果您在请求中获得401，那么端点似乎需要某种形式的身份验证。我不熟悉您使用的端点，但可能有一些关于身份验证的文档？我知道就好像我在想如果401计划会回来，那么我已经通过了飞行前的测试。让我感到不可思议的是，我使用的证书与使用PostMan时返回预期答案的证书完全相同；只是尝试使用Aurelia，但没有返回。PostMan没有提出CORS请求，这就是为什么它有效。也就是说，我也有同样的问题lem.我不是在用Aurelia，而是AngularJS.现在这里奇怪的部分是一个Auth0租户工作，另一个没有。

private getToken() {
    var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
    this.http.fetch('https://kimberlite.auth0.com/oauth/token', {
        credentials: 'omit',
        headers: {
            'Content-Type': 'application/json'
        },
        mode: 'cors',
        method: 'post',
        body: JSON.stringify(postData)
    }).then(result => result.json())
        .then(data => {
            localStorage.setItem('api_access_token', data.access_token);
            localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
        });
}