Извлечение параметров запроса из HTTP get/post в сервисе angular 4

Я пытаюсь отправить данные формы, используя следующую форму HTML:-

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

<form action="https://test-pubg.sohum.com:4200/securelogin" target="_blank" method="get">
  Access: <input type="text" id="accessToken" name="accessToken"><br>
  Refresh: <input type="text" id="refreshToken" name="refreshToken"><br>
  <button type="submit">Submit</button><br>
</form>

теперь каждый раз, когда я нажимаю кнопку отправки, открывается другая вкладка (которая предназначена) с URL:- https://test-pubg.sohum.comt:4200/securelogin?accessToken=test&refreshToken=test

Я получаю пустую консоль браузера, которая является проблемой

Теперь, если я изменю URL на следующий (обратите внимание на #, добавленный в URL) и обновлю URL, нажав F5:-

https://test-pubg.sohum.com:4200/#/securelogin?accessToken=test&refreshToken=test

я получаю предполагаемые данные на консоли браузера, которая выглядит следующим образом:

Angular работает в режиме разработки. Вызовите enableProdMode(), чтобы включить производственный режим.

конструктор называется

тестовое задание

тестовое задание

Это происходит даже в том случае, если метод действия формы является post

Теперь на URL действия у меня запущен угловой сервис 4, конструктор которого выглядит следующим образом:

constructor(private route: ActivatedRoute,private router: Router,
private secureloginService: SecureloginService,private http: HttpClient) {
  console.log("constructor called");
  this.accessToken = this.route.snapshot
  .queryParams['accessToken'];
  console.log(this.accessToken);
  this.refreshToken = this.route.snapshot
  .queryParams['refreshToken'];
  console.log( this.refreshToken);

  this.route.queryParamMap.subscribe(params => {
    console.log(params);
  });


 }

Я не могу отправить данные после нажатия кнопки "Отправить". Также обратите внимание, что я включил HTTPS для своего приложения. Для справки я публикую свои угловые детали маршрутизации следующим образом:

proxy.conf.js

{
"/" : "http://test-pubg.sohum.com:8080",
"secure": false}

componenet-routing.moudle.ts

const routes: Routes = [
  {path: '', component: SecureloginReceiverComponent},
  {path: 'securelogin/', component: SecureloginReceiverComponent,pathMatch: 'full' }
];
export const SecureloginRoutingModule = RouterModule.forChild(routes);

package.json:-

"start": "ng serve --disable-host-check --ssl 1 --proxy-config proxy.conf.json",

Что может быть возможной причиной такого поведения. Я уже следил за связанными потоками, доступными на stackru и github. за помощь я буду благодарен.

Источник

2 ответа

Решение

Таким образом, реальная проблема заключалась в статусе HTTP и недоступности параметров в URL . ActivatedRoute сможет читать все, что передается в URL, т.е. когда вызывается угловая страница, параметр запроса должен быть виден в URL, тогда только ActivatedRoute сможет читать данные. Во-вторых, я делал межсерверный, то есть с одного сервера на другой, так что, хотя во время вызова URL был:-

https://test-pubg.sohum.com:4200/#/securelogin?accessToken=abc&refreshToken=cccc

но после перенаправления оно менялось на следующее:

https://test-pubg.sohum.com:4200/

пропуская параметр запроса, делая их недоступными в URL. Следовательно ActivatedRoute не смог прочитать. Итак, в качестве решения, которое я нашел, нужно явно установить статус HTTP перед перенаправлением на OK. Следуйте примеру кода:-

ModelAndView view = new ModelAndView("redirect:" + appUrl);
view.addObject("usr", userName); 
view.setStatus(HttpStatus.OK);

И еще очень важно отметить, что эта концепция работает, только если вы делаете HTTP-запрос GET.

Источник

Прежде всего, вы должны использовать угловые формы, а не HTML <form action атрибут, который мешает SPA-дизайну Angular.

Я думаю, что ваш proxy-conf.json тоже недействителен

Тебе стоит попробовать

{
  "/**": {
    "target": "http://test-pubg.sohum.com:8080", //back-end adress:port
    "secure": false,
    "changeOrigin": true
  }
}

Затем в SecureloginReceiverComponent Вы должны позвонить SecureloginServiceметод публикации входных данных формы (отправляется через атрибуты метода).

Нет необходимости обновлять страницу и помещать входные данные в URL.

Источник
Другие вопросы по тегам