试图将 jquery AJAX 转换为 Fetch API，如何设置RequestHeader？

Posted 2023-02-22

【中文标题】试图将 jquery AJAX 转换为 Fetch API，如何设置RequestHeader？

【英文标题】：Trying to convert jquery AJAX to Fetch API, how to setRequestHeader?

【发布时间】：2018-04-26 09:31:44

【问题描述】：

我有对 Wordpress API 的 jQuery AJAX 调用，我需要在 requestHeader 中设置 Nonce 以进行身份​​验证。

$.ajax(
  url: '/wp-json/app/v1/get_data/',
  method: 'POST',
  beforeSend: function ( xhr ) 
    xhr.setRequestHeader( 'X-WP-Nonce', NONCE ); // NONCE is global var
  ,
  data: ,
).done(onSuccess);

然后我想将该代码转换为 Fetch API，所以我尝试了这个：

window.fetch('/wp-json/app/v1/get_data/', 
  method: 'POST',
  headers: 
    'Content-Type': 'application/json',
    'X-WP-Nonce': NONCE
  ,
  body: ,
).then(onSuccess)

但是我得到 403 Forbidden 就好像我的 Nonce 没有被检测到一样。我不确定设置 requestHeader 是否正确。

我找不到太多关于 Fetch API 的信息，所以有人有这方面的经验吗？

谢谢

【参考方案1】：

我现在可以工作了，上面的答案没有用，我必须对身体数据进行字符串化

    (async function fetchUsers()
    var datas = 
    'title':'test'
    
    const resOne = await fetch('http://localhost/elementor_barba/wp-json/wp/v2/posts/1',
        method : 'POST',
        headers : 
         'Content-Type': 'application/json',
          'X-WP-Nonce' :  universityData.nonce // here you used the wrong name
        ,
        credentials: 'same-origin',
        body:JSON.stringify(datas)
        
       
    )
    const dataOne = await resOne.json()
    

    console.log(dataOne)

)()

【参考方案2】：

我通过在参数中添加credentials: 'same-origin' 解决了这个问题

window.fetch('/wp-json/app/v1/get_data/', 
  method: 'POST',
  headers: 
    'Content-Type': 'application/json',
    'X-WP-Nonce': NONCE
  ,
  credentials: 'same-origin',
  body: ,
).then(onSuccess)