Я пытаюсь отправить данные формы, используя следующую 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
У меня пустая консоль браузера, и это проблема
Now if i change the URL to the following(note the # added in the URL) and refreah the url by pressing F5 :- https://test-pubg.sohum.com:4200/#/securelogin?accessToken=test&refreshToken=testЯ получаю нужные данные в консоли браузера, а именно: -
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
constructor called test test
Это происходит даже в том случае, если метод действия формы - post
Теперь по URL-адресу действия у меня работает служба angular 4, конструктор которой выглядит следующим образом: -
constructor(private route: ActivatedRoute,private router: Router,
private secureloginService: SecureloginService,private http: HttpClient) {
console.info("constructor called");
this.accessToken = this.route.snapshot
.queryParams['accessToken'];
console.info(this.accessToken);
this.refreshToken = this.route.snapshot
.queryParams['refreshToken'];
console.info( this.refreshToken);
this.route.queryParamMap.subscribe(params => {
console.info(params);
});
}
Я не могу отправить данные при нажатии кнопки отправки. Также обратите внимание, что я включил HTTPS для своего приложения. Для справки я публикую свои данные о маршрутизации angular следующим образом: -
proxy.conf.js
{
"/" : "http://test-pubg.sohum.com:8080",
"secure": false}
компонент-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",
Что могло быть возможной причиной такого поведения. Я уже следил за связанными потоками, доступными в stackoverflow и github. за помощь буду благодарен.
🤔 А знаете ли вы, что...
Для создания пользовательских интерфейсов в Angular используется декларативный язык шаблонов.
Прежде всего, вы должны использовать атрибут Угловые формы, а не HTML <form action
, который мешает дизайну Angular SPA.
Я думаю, что ваш proxy-conf.json тоже недействителен
Ты должен попытаться
{
"/**": {
"target": "http://test-pubg.sohum.com:8080", //back-end adress:port
"secure": false,
"changeOrigin": true
}
}
Затем в SecureloginReceiverComponent
вы должны вызвать метод SecureloginService
для публикации входных данных формы (отправленных через атрибуты метода).
Нет необходимости обновлять страницу или помещать входные данные в URL-адрес.
Итак, настоящая проблема заключалась в статусе HTTP и недоступности параметров в URL-адресе. ActivatedRoute сможет читать все, что передается в URL-адресе, т.е. когда вызывается страница angular, параметр запроса должен быть виден в URL-адресе, тогда только ActivatedRoute сможет читать данные. Во-вторых, я делал межсерверный, то есть от одного сервера к другому, поэтому, хотя во время вызова URL был: -
https://test-pubg.sohum.com:4200/#/securelogin?accessToken=abc&refreshToken=cccc
но после перенаправления он менялся на следующее: -
опуская параметр запроса, что делает их недоступными в URL. Следовательно, ActivatedRoute не смог прочитать. В качестве решения, которое я нашел, нужно явно установить статус HTTP перед перенаправлением на хорошо. Следуйте образцу кода: -
ModelAndView view = new ModelAndView("redirect:" + appUrl);
view.addObject("usr", userName);
view.setStatus(HttpStatus.OK);
И еще одно очень важное замечание: эта концепция работает только в том случае, если вы выполняете HTTP-запрос GET.