鍍金池/ 問答/HTML/ JavaScript使用fetch post方法跨域出現(xiàn)錯誤

JavaScript使用fetch post方法跨域出現(xiàn)錯誤

我使用以下代碼進(jìn)行post方法的跨域請求：

let formData= new FormData();
      for (var attr in data) {//data是一個json對象
          formData.append(attr,data[attr]);
      }
fetch(url,?{
            method:?method,
            mode:?"cors",
            headers:?{
                'Content-Type': 'application/json',
                "Cross-Method": "CORS",
            },
            body: formData,
        }).then(function?(res)?{
            console.log("fetch?request?",?JSON.stringify(res.ok));
            if(res.ok){
                res.json().then(function?(json)?{
                    console.info(json);
                    message.success('提示：'+'來自后臺數(shù)據(jù)：\r\n'+json);
                });
            }else{
                message.error('提示：'+'請求失敗');
            }

        }).catch(function?(e)?{
            message.error('提示：'+'系統(tǒng)錯誤');
        });

可是顯示有以下錯誤：

clipboard.png

clipboard.png
post參數(shù)和我編寫的自定義頭完全沒有
返回的提示是 Invalid CORS request
不知道是哪里出了錯呢？

回答
編輯回答
互擼娃

服務(wù)端程序應(yīng)該設(shè)置允許跨域 + 允許攜帶的頭。

你這邊提供了自定義頭部 cross-method,content-type，如果使用的是 php：

// 允許所有源訪問
header('Access-Control-Allow-Origin: *');
// 允許攜帶的頭
// Access-Control-Allow-Headers 具體詳情請查看：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
header('Access-Control-Allow-headers: cross-method'); // 由于 content-type 屬于簡單頭部，自動允許，無需提供
2018年6月23日 14:00