Nano Hash - криптовалюты, майнинг, программирование

angular 2 с auth0 для чтения всех ошибок пользователя. Ответ на предварительный запрос не проходит проверку контроля доступа: нет «Access-Control-Allow-Origin»

Может читать профиль пользователя и может обновлять метаданные пользователя из Auth0 в моем приложении angular 2. Как это

 this.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {
          // Handle error
          alert(error);
          return;
        }

А также

this.authHttp
      .patch('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, data, {headers: headers})
      .map(response => response.json())
      .subscribe(
        response => {
          this.auth.userProfile = response;
          localStorage.setItem('profile', JSON.stringify(response));
          this.router.navigate(['/profile']);
        },
        error => alert(error.json().message)
      );

Но при попытке заставить всех пользователей получать ошибку - "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404." введите здесь описание изображения

это код

var headers: any = {
      "Content-Type": "application/json; charset=utf-8",
      "cache-control": "no-cache"
    };
    this.authHttp
          .get('https://' + myConfig.domain + '/api/v2/users/' + '?per_page=100&page=0&search_engine=v2', { headers: headers })
          .map(response => response.json())
          .subscribe(
          response => {
            console.log(response);
          },
          error => alert(error.json().message)
          );

где клиентский тест работает нормально на веб-сайте https://auth0.com/docs/api/management/v2#!/Users/get_users введите описание изображения здесь Не знаю, что пошло не так.

Также заголовок с Access-Control-Allow-Origin имеет ту же проблему

var headers: any = {
      "Content-Type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
       "Access-Control-Allow-Origin": "*"
    };

введите здесь описание изображения введите здесь описание изображения


  • в настройках Auth0 вы добавили localhost к разрешенным URL-адресам обратного вызова? если нет, то вы также получите эту ошибку 20.12.2016

Ответы:


1

На самом деле, вы пытаетесь использовать localhost, поэтому вам нужно добавить header в бэкэнд:

 .header("Access-Control-Allow-Origin", "*")

Надеюсь, это поможет.

20.12.2016
  • нет :-( все еще не работает. Обновите заголовок вопроса с помощью Access-Control-Allow-Origin. Та же проблема 20.12.2016
  • Вы добавили угловой код (front-end). Можете ли вы попробовать добавить свой внутренний код? 20.12.2016
  • Я использую auth0(auth0.com) для сервера. Не знаю, как настроить веб-сайт Access-Control @auth0 20.12.2016
  • @Manu: вы можете настроить его в настройках вашего приложения, проверьте: manage.auth0.com/#/applications Я имею в виду то, что вы хотите разрешить для своего приложения. 20.12.2016
  • Я настроил как разрешенные URL-адреса обратного вызова, так и разрешенные источники (CORS). Отредактировал вопрос для моей конфигурации. Пожалуйста, дайте мне знать, если я что-то упустил 21.12.2016
  • Все еще вы получаете то же самое? Вы добавили localhost к разрешенным URL-адресам обратного вызова? 21.12.2016
  • Привет, Авнеш, это конфигурация localhost:4200, localhost:4200/профиль, localhost:3000, localhost:3000/ping, localhost: 3000/все пользователи 21.12.2016

  • 2

    Вы настраиваете это в архиве сервера (пример: Apache): .htaccess с помощью:

    Header set Access-Control-Allow-Origin "*"
    

    Но вы можете попробовать установить расширение в Google Chrome тоже. В случае среды разработки:

    Введите URL-адрес: chrome://settings/ -> Extensions -> Get more extensions -> Искать Allow-Control-Allow-Origin: * -> Click to Active the Extension and try run code again.

    И вы можете увидеть, почему эта ошибка -> нажмите.

    Другие сообщения, которые решили проблемы нескольких людей с одной и той же ошибкой -> (переполнение стека)

    20.12.2016
  • Привет, Саюри, это расширение уже добавлено в мой хром. Но у меня такая же проблема. 20.12.2016
  • Теперь нажмите, чтобы включить общий доступ к ресурсам между источниками, и попробуйте запустить код. 20.12.2016
  • если не работает, попробуйте добавить URL-адрес в шаблоны перехваченных URL-адресов или URL-адресов. 20.12.2016

  • 3

    Проблема в том, что запрос завершится ошибкой, даже если предварительный запрос CORS не будет отправлен. Ключевая часть, указывающая на это, заключается в том, что ответ на предварительный запрос не находится в диапазоне 2XX.

    Вы получаете ответ 404 при предварительной проверке, но если вы сделаете тот же запрос из приложения, которое не привязано к CORS, вы все равно получите 404.

    Правильный адрес конечной точки, которую вы пытаетесь вызвать::

    https://[AUTH0_ACCOUNT]/api/v2/users

    и вместо этого вы звоните:

    https://[AUTH0_ACCOUNT]/api/v2/users/
    

    Необходимо удалить лишнюю косую черту в конце.


    Однако это решит проблему 404, но не основную проблему... API управления Auth0 предназначен для использования приложением на стороне сервера, которое может получить необходимые токены доступа с помощью средств аутентификации клиента.

    Для справки см. Токен API v2 управления Auth0.

    Причина, по которой пользовательская конечная точка PATCH работает, может быть связана с тем, что эта конечная точка влияет только на одного пользователя и разрешен CORS.

    21.12.2016
  • Привет, Жоао, сейчас я использую этот URL-адрес, но та же проблема: : заголовки }) 21.12.2016
  • Только что попробовал со своей учетной записью, и я получаю 401, если я использую этот шаблон URL, а не 404. 401, потому что я не включил необходимый токен, если я включу действительный токен, используя заголовок Authorization: Bearer <token>, я получаю ответ 200 с данные пользователя. **Если вы все еще видите ошибку 404 с этим шаблоном URL, убедитесь, что вы правильно ввели <my account> часть URL. 21.12.2016
  • не уверен, как вы используете - Авторизация: Bearer ‹токен›, но даже если я использую .get('https://<ac name>.auth0.com/api/v2/users', {заголовки: заголовки}) получаю ошибку ** Ответ на предварительный запрос не проходит проверку контроля доступа: нет «Access-Control-Allow Заголовок -Origin присутствует на запрошенном ресурсе. Таким образом, источник 'localhost:3000' не имеет доступа.** но исправление работает this.authHttp .patch('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, data, {headers: headers}) 21.12.2016
  • Плохо, я посмотрел на конкретную ошибку, и мой мозг не обработал полной картины того, что вы пытались сделать. API управления Auth0 предназначен для использования внутренними серверами, поэтому CORS не включен, поскольку приложения, которые должны вызывать его, не подпадают под эти ограничения. Прямо сейчас я не могу найти никакой документации по этому вопросу, но причина, по которой это работает для PATH, возможно, заключается в том, что это конечная точка, специфичная для одного пользователя, и поэтому CORS разрешен, но не уверен, что это будет продолжаться так. Я обновлю ответ. 21.12.2016
  • Таким образом, со стороны клиента (angular2) не может выполнять вызов API, его необходимо реализовать только на стороне сервера. Нет проблем с ожиданием вашего ответа. 21.12.2016
  • Да, это правильно, на стороне клиента в браузере у вас есть проблема CORS, но даже если бы вы этого не сделали, клиент не смог бы запросить правильный токен доступа, потому что любой тип учетных данных клиента, хранящихся у клиента, может быть получен злоумышленником, имеющим доступ к клиентскому коду. Правильно делать это на стороне сервера. 21.12.2016
  • Я думаю, что со стороны клиента мы можем это сделать, authHttp из angular2-jwt я пробовал, но закончил с ошибкой - 403 (Forbidden) 21.12.2016
  • Дело не в том, сможете ли вы найти способ сделать это на стороне клиента; вы не должны делать это на стороне клиента в своем собственном приложении из соображений безопасности; вы не хотите, чтобы ваши пользователи могли получить доступ к Management API. 22.12.2016
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..