Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
248 views
in Technique[技术] by (71.8m points)

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

答案:目前无解,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.postbody 中,提交失败,提示跨域,但跨域问题已经解决了。

<!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提交错误如下:

image

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...