iT邦幫忙

0

前端CORS header 指定Content-Type

  • 分享至 

  • xImage

因為我的請求是跨域,已經請B網域後端 安裝插件並處理允許我所在A網域的請求
只要用沒有額外header的請求方式,就可以取資料
但在header加東西後,就會顯示CORS阻擋,

麻煩前輩們解惑
目前已經寫出確定可溝通狀態
現在想將 送出資料改成寫在body 而且資料格式為'application/json'

/*送出資料改成body*/
xhr.open('POST', apiUrl+'?'+queryString, true); /*原本*/
/*改成*/
xhr.open('POST', apiUrl, true);
xhr.send(JSON.stringify(decodedParams));

/*標頭增加收發資料格式*/
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
/*預設給text/plain;charset=UTF-8*/
/*我的資料會變成 [Object object]*/

我是用前端jquery處理,非js框架 cshtml 或 blade。
後端是框架軟體,資料放網址param或body(需要搭配content-type)都能收
無規定一定要用甚麼方式請求只是要保持本頁面不要刷新
這部分 爬文有點困難,搜索第一時間都是給一堆大陸農場文。

1.確定可以使用XMLHttpRequest 請求:

var apiUrl="https://B網域/api/功能";
var queryString="查詢/參數 get查資料";
var decodedParams="查詢/參數 格式為object json或Array";

var xhr = new XMLHttpRequest();
xhr.open('POST', apiUrl+'?'+queryString, true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            alert('成功')
            const res = JSON.parse(xhr.responseText);
            console.log(res);

        } else {
            console.log('Request failed with status:', xhr.status);
            apifail('Request failed with status: ' + xhr.status);
        }
    }
};
xhr.send(JSON.stringify(decodedParams));

已經嘗試失敗方法:

  1. ajax嘗試追加header屬性 排列組合嘗試
    使用ajax我湊不出來可以跨域請求的狀態
    包含在ajax使用下列所有排列類型
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Origin': 'https://B網域',
'dataType': 'jsonp',
'crossDomain': true,
'xhrFields': {
    'withCredentials': true
},
  1. 檢查成功的XMLHttpRequest請求與失敗的請求 兩者header差異 手動補上屬性
xhr.withCredentials = true;
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Accept-Encoding', 'gzip, deflate, br');
xhr.setRequestHeader('Connection', 'keep-alive');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Host', 'B網站');
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Sec-Fetch-Dest', 'empty');
xhr.setRequestHeader('Sec-Fetch-Mode', 'cors');
xhr.setRequestHeader('Sec-Fetch-Site', 'cross-site');
  1. 將ajax改成用fetch請求
    給chatGPT我ajax請求整個function請他改寫成用fetch方式
froce iT邦大師 1 級 ‧ 2023-10-03 22:04:02 檢舉
CORS是後端處理的,前端不管加什麼都沒用
rian1995 iT邦新手 5 級 ‧ 2023-10-04 08:54:36 檢舉
謝謝froce前輩回答
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答