在Angular8中如何实现Html action 提交数据 ？

如下代码，向 http://124.**.**.**:3306/trusted 提交表单，
静态页面，利用body onload事件自动提交后，在页面上打印出服务器返回的token值，输出代码结果如下：

<pre>Kc0WOmoaT_-onNkXGzKR2Q==:feVJdMutEKc4Po9rkHfE562o</pre>

将 <form>表单中的<table>内容放在 Angular8 http.post 的 body 中，提交失败，提示跨域，但跨域问题已经解决了。

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>样例展示</title>
<script type="text/javascript">
function submitForm(){
document.getElementById('form1').action =
document.getElementById('server').value + "/trusted";
}
</script>
<script>
function presubmit(){
submitForm();
document.getElementById('form1').submit();
}
</script>
</head>
<body  onload="presubmit()">
<form method="post" id="form1" onSubmit="submitForm()">
<table>
<tr>
<td >Username</td>
<td><input type="text" name="username" value="admin" /></td>
</tr>
<tr>
<td>Server</td>
<td><input type="text" id="server" name="server" value="http://124.**.**.**:3306" /></td>
</tr>
<tr>
<td>Client IP (optional)</td>
<td><input type="text" id="client_ip" name="client_ip" value="223.104.236.96" /></td>
</tr>
<tr>
<td>Site (leave blank for Default site; otherwise enter the site name)</td>
<td><input type="text" id="target_site" name="target_site" value="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

Angular8 中提交代码如下：

    getJsToken() {
const headers = new HttpHeaders().set('Content-Type', 'application/json')
.set('Content-Type', 'application/x-www-form-urlencoded');
const body =    '<table>' +
'<tr>' +
'<td>Username</td>' +
'<td><input type="text" name="username" value="admin" /></td>' +
'</tr>' +
'<tr>' +
'<td>Server</td>' +
'<td><input type="text" id="server" name="server" value="http://124.**.**.**:3306" /></td>' +
'</tr>' +
'<tr>' +
'<td>Client IP (optional)</td>' +
'<td><input type="text" id="client_ip" name="client_ip" value="223.104.236.105" /></td>' +
'</tr>' +
'<tr>' +
'<td>Site (leave blank for Default site; otherwise enter the site name)</td>' +
'<td><input type="text" id="target_site" name="target_site" value="" /></td>' +
'</tr>' +
'<tr>' +
'<td> </td>' +
'</tr>' +
'</table>';
const hdr = { headers };
return this.http.post(this.uri_tableau + 'trusted', body, hdr)
.pipe(map(
(res: {credentials: Token})  => {
console.log(res)
return res;
}));
}

Angular提交错误如下：

回答

浏览器说响应头里没有设置 access-control-allow-origin 所以请求被 block 了，请检查一下你的 response header。

浏览器说的你无视，人家直接指出问题所在，你仍然觉得自己“跨域问题已经解决了”，浏览器要气吐血了。

首先，要相信浏览器是对的，它说你没有解决那就是没有解决。

然后呢，这个问题我想应该从调试的角度入手：浏览器只告诉我们说没有解决，却没有把为什么它认为没有解决给暴露出来。

排查这个问题的根本在于应该将chrome隐藏的options请求显示出来：

image.png

或者直接使用firefox浏览器也是可以的。

此文https://www.kancloud.cn/yunzhiclub/springboot_angular_guide/1521023相对详细的讲解了浏览器是怎么判断cors是否解决的。

希望能够帮到你。

以上是 在Angular8中如何实现Html action 提交数据 ？ 的全部内容， 来源链接： utcz.com/a/55209.html

回到顶部