## 關(guān)于使用Form表單提交POST請求被攔截問題
+ 本意上喳整，form表單打開新窗口提交post請求不會被瀏覽器攔截苫费，而且是很好的解決方式，但是，F(xiàn)orm表單的Actios由于是請求的地址模孩，如果出現(xiàn)： 先請求某個接口，拿到url贮缅，然后在創(chuàng)建form表單請求榨咐，就一定被攔截， 除非該url是本地的携悯，不是請求獲取的祭芦。
#### 1 form表單新建頁面提交POST請求的一般方式（請求的url不是通過接口獲取的，而是本地的）
+ 不需要任何操作憔鬼，直接創(chuàng)建一個form表單元素龟劲，在form表單元素中創(chuàng)建input，input的value就是提交的數(shù)據(jù)轴或，代碼如下
```
openPostWindow(url,?data,?name='_blank')?{
????????var?tempForm?=?document.createElement("form");
????????tempForm.id?=?"tempForm1";
????????tempForm.method?=?"post";
????????tempForm.action?=?url;
????????tempForm.target?=?name;????//?_blank?-?URL加載到一個新的窗口
????????for(let?key??in?data){
??????????var?hideInput?=?document.createElement("input");
??????????hideInput.type?=?"hidden";
??????????hideInput.name?=?key;
??????????hideInput.value?=?data[key];
??????????tempForm.appendChild(hideInput);
????????}
????????//?可以傳多個參數(shù)
????????if(document.all){????//?兼容不同瀏覽器
??????????tempForm.attachEvent("onsubmit",function(){});????????//IE
????????}else{
??????????tempForm.addEventListener("submit",function(){},false);????//firefox
????????}
????????document.body.appendChild(tempForm);
????????if(document.all){????//?兼容不同瀏覽器
??????????tempForm.fireEvent("onsubmit");
????????}else{
??????????tempForm.dispatchEvent(new?Event("submit"));
????????}
????????tempForm.submit();
????????document.body.removeChild(tempForm);
??????},
```
+ 直接傳入請求的url和data對象
#### 2 先請求接口拿到form表單提交的url（第1種方式會被攔截）
+ 如果是在請求接口獲取url后再執(zhí)行Form表單昌跌，會被攔截
+ 處理方法
? ? + 1 先打開一個空白頁面： window.open()
? ? + 2 請求接口獲取url
? ? + 3 調(diào)用創(chuàng)建Form表單的方法，執(zhí)行請求
? ? + 備注：如果請求失敗照雁，記得close()關(guān)閉彈窗
+ 代碼如下
```
? ? // 在dada中定義一個變量存儲新打開的窗口
? ? newWin: ' '
```
```
? // 在調(diào)用請求url的方法開始之前,創(chuàng)建新的窗口
? this.newWin = window.open()
? // 請求接口獲取url和data
? function 請求接口函數(shù)(){
? ? ? // 請求的接口代碼
? ? ? const {url, data} = xxxx
? ? ? this.openPostWindow(url,data)
? }
```
```
? ? // 新建form表單的函數(shù)
? ? openPostWindow(url, params) {?
? ? //設(shè)置樣式為隱藏蚕愤，打開新標(biāo)簽再跳轉(zhuǎn)頁面前，如果有可現(xiàn)實的表單選項饺蚊，用戶會看到表單內(nèi)容數(shù)據(jù)?
? ? let formStr = "";??
? ? let inputs = "";?
? ? for (let key in params) {???
? ? ? ? inputs += `<input type="hidden" name="${key}" value="${params[key]}" />`;?
? ? }?
? ? formStr = `<form style="visibility:hidden;" method="POST" action="${url}">${inputs}</form>`;?? ? ? ? ? ? ? ? ? ? this.newWin.document.body.innerHTML = formStr;?
? ? let form = this.newWin.document.forms[0];?
? ??if(document.all){????//?兼容不同瀏覽器
??????????tempForm.attachEvent("onsubmit",function(){});????????//IE
????????}else{
??????????tempForm.addEventListener("submit",function(){},false);????//firefox
????????}
????????if(document.all){????//?兼容不同瀏覽器
??????????tempForm.fireEvent("onsubmit");
????????}else{
??????????tempForm.dispatchEvent(new?Event("submit"));
????????}
????????tempForm.submit();
??????},
? ? ? return this.newWin;},? ?
```
```
? ? // 如果請求失敗萍诱，切記關(guān)閉當(dāng)前新建的彈窗
? ? tihs.newWin.close()
```
