Проверьте учетные данные удаленного сайта с Angular - PullRequest
Новая
       65

Проверьте учетные данные удаленного сайта с Angular

0 голосов
/ 05 февраля 2019

Я создаю интерфейс для новостей хакеров с angular 7. Обычно я использую общедоступные API, но для служб входа они недоступны.

Я пытаюсь сделать POST-вызов, так каквыполняется приложением OpenSource Android Client для HN, в частности, в этом файле: https://github.com/hidroh/materialistic/blob/master/app/src/main/java/io/github/hidroh/materialistic/accounts/UserServicesClient.java на URL https://news.ycombinator.com/login, установка имени пользователя, пароля и перенаправления в качестве параметров.

К сожалению, мой запросзаблокирован политикой CORS.

Я выполнил тест с почтальоном и вместо этого работает отлично.

Это мой код: 

const payload = {
  'acct': 'username',
  'pw': 'password',
  'goto': 'news'
};

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE, HEAD',
    'Access-Control-Allow-Headers': 'X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Access-Control-Max-Age': '1728000',
  })
};

console.log('Try login');
this.http.post('https://news.ycombinator.com/login', payload, httpOptions)
  .pipe(
    tap(
      data => console.log(data),
      error => console.log(error)
    )
  ).subscribe(result => console.log(result));

как я могу решить?

Ответы [ 3 ]

0 голосов
/ 18 февраля 2019

Я столкнулся с той же проблемой при отправке запроса из веб-домена в домен веб-API и решил ее следующим образом:

  1. Добавьте следующую конфигурацию в конфигурацию веб-API.файл, чтобы включить HTTP-запрос и разрешить заголовок клиента: enter image description here

  2. Создайте файл XML с именем crossdomain.xml и добавьте этот файл в корневой каталогвеб или проект приложения.enter image description here

  3. Также добавьте следующую конфигурацию в файл конфигурации веб-проекта или приложения: enter image description here

Это решит междоменную проблему.

0 голосов
/ 19 февраля 2019

Решением проблем CORS является использование прокси-сервера, для angular в процессе разработки вы можете использовать Angular CLI-сервер в качестве прокси (/9921198/vnedrenie-proksi-servera-v-angular4-5 -angular4-5? Rq = 1 ).

Это мой proxy.conf.json: 

{
  "/hackernews/*": {
  "target":  {
      "host": "news.ycombinator.com",
      "protocol": "https:",
      "port": 443
  },
  "secure": false,
  "logLevel": "info",
  "changeOrigin": true,
  "pathRewrite": {"^/hackernews" : ""}
  }
}

Отредактируйте «start» вашего package.json, чтобы он выглядел ниже 

"start": "ng serve --proxy-config proxy.conf.json"

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

0 голосов
/ 15 февраля 2019

Вы не можете сделать ajax-вызов на сервер с CORS.Браузер проверяет политику CORS сервера.

Приложение Android / IOS не является браузером, оно может выполнять вызов без блокировки.

Если у вас есть собственный сервер, вы можете выполнитьзапрос на ваш сервер, который, в свою очередь, отправит запрос на сервер Harker Ranks и вернет ответ вашему приложению Angular.

Получить страницу с помощью запроса curl.Замените acct и pw вашими учетными данными. 

curl -L -X POST \
  https://news.ycombinator.com/login \
  -H 'Access-Control-Allow-Headers: X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'cache-control: no-cache' \
  -d 'acct=username&pw=password&goto=%20news'
...