Question

我有对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的信息，所以任何人都有这方面的经验吗？

由于

Answer 1

我通过将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)

Answer 2

我现在开始工作了，上面的答案不起作用，我不得不将身体数据串起来

(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)

})()

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

2 个答案: