Aurelia HttpClient.Fetch для получения токена от Auth0, но отлично работает в Почтальоне - PullRequest
Новая
       12

Aurelia HttpClient.Fetch для получения токена от Auth0, но отлично работает в Почтальоне

0 голосов
/ 11 мая 2018

У меня нет проблем с возвратом токена на предъявителя при использовании Почтальона. Однако, когда я использую Aurelia, я получаю статус 200 с «ОК» в качестве единственного ответа. Я вижу, что Метод запроса по-прежнему "ОПЦИИ". Я вижу это в консоли 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"
}

Вот код от Аурелии: 

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);
        });
}

enter image description here enter image description here

Я искал и не нашел ничего, что помогло бы мне пройти это. Чего мне не хватает? Любая помощь с благодарностью

После прочтения комментария Джесси ниже, я удалил заголовок для «Access-Control-Allow-Origin» и получил те же 200 OK. Тем не менее, получить ошибку в Google Chrome Origin 'localhost:3000'; is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.".

После прочтения других вопросов я попытался удалить все заголовки, и я получил 401 Unathorized со следующим ответом {{"error": "access_denied", "error_description": "Unauthorized"} 

    private getToken() {
    var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
    let http = new HttpClient();
    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);
        });
}

хорошо, я только что попробовал в Firefox, используя только заголовок «Content-Type» и получил ожидаемый ответ. Что-то с Chrome (которым будет пользоваться большинство пользователей), что мне нужно знать? enter image description here

1 Ответ

0 голосов
/ 11 мая 2018

Не следует устанавливать заголовок access-control-allow-origin в запросе. В запросе CORS конечная точка сервера должна установить этот заголовок в ответ на ваш запрос OPTIONS.

Способ, которым работает Cross-Origin Resource Sharing, заключается в том, что клиент сначала делает вызов OPTIONS к конечной точке сервера. Конечная точка сервера должна быть настроена на использование CORS и иметь список разрешенных источников (или просто * для разрешения всех источников). Затем в ответ на этот запрос OPTIONS сервер установит Access-Control-Allow-Origin: https://localhost:3000, чтобы указать, что источнику разрешено делать запрос. Вы можете увидеть это и в своем ответе:

Response header

Затем клиент продолжает выполнение вызова GET или POST для той же конечной точки и фактически извлекает / сохраняет данные.

В вашем случае, если вы делаете запрос с помощью клиента извлечения 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'
        },
        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);
        });
}
...