Question

我正在尝试使用以下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中添加的＃），然后按F5刷新URL：-

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

我正在浏览器控制台上获得预期的数据，如下所示：-

Angular在开发模式下运行。调用enableProdMode（）来   启用生产模式。
名为

test

的构造函数   测试

即使表单的操作方法为post

，也会发生这种情况

现在在动作URL上，我正在运行一个angular 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",

此行为的可能原因是什么。我已经关注了stackoverflow和github上可用的相关线程。对于某种帮助，我将不胜感激。

Answer 1

真正的问题是HTTP状态和URL中参数的不可用。 ActivatedRoute将能够读取URL中传递的任何内容，即，在调用角度页面时，URL中应显示查询参数，然后只有ActivatedRoute才能读取数据。其次，我正在建立一个服务器间，即从一台服务器到另一台服务器，因此即使在调用URL时是：-

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

但是重定向后，它已更改为以下内容：-

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

省略查询参数，使它们在URL中不可用。因此，ActivatedRoute无法读取。因此，作为我发现的解决方案，必须在重定向到 OK 之前显式设置HTTP状态。请遵循示例代码：-

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

要注意的另一个非常重要的一点是，仅当您发出HTTP GET请求时，此概念才有效。

Answer 2

首先，应该使用Angular Forms而不是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。

在angular 4服务中从HTTP get / post获取查询参数

2 个答案: