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

发布于 2022-09-12 12:54:02 字数 3963 浏览 18 评论 0

答案:目前无解,tableau JS API 没有设置access-control-allow-origin 的命令.

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

<pre style="word-wrap: break-word; white-space: pre-wrap;">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>&#160;</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>&#160;</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提交错误如下：