Failed to load resource: the server responded with a status of 406 (Not Acceptable) during javascrip-CodePudding

I am making a fetch api POST request to a url. It responds with a 406 error. Here is my code:

function arCall(url = '', data = {}) {
  fetch(url, {
    method: 'POST', 
    mode: 'cors', 
    headers: {
      'Accept': 'application/json, text/html, */*',
      'Accept-Charset': 'UTF-8',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data) 
  })
  .then((res) => {
    console.log(res)
    return res.text();
  })
  .then(data => console.log(data))
}

arCall('<my URL>', { id: 100 });

I looked at this question What is "406-Not Acceptable Response" in HTTP? and based on that, added */* to the 'Accept' header. Unfortunately, I still get the same error.

Here are some of the details of the header response:

HTTP/1.1 406 Not Acceptable
Content-Type: text/html; charset=UTF-8
Content-Language: en
Cache-Control: must-revalidate, no-cache, private
Server: Apache
X-Generator: Drupal 9 (https://www.drupal.org)
X-Drupal-Dynamic-Cache: UNCACHEABLE

CodePudding user response：

Based on the details of your header response (as in the cms is Drupal) and the fact that setting 'Accept' to */* didn't work, I think the problem could be with your URL.

According to https://drupal.stackexchange.com/questions/258823/drupal-8-5-rest-406-not-acceptable, you need to add ?_format=FORMAT at the end of your URL if you haven't already done so. Since this is Drupal, I think the format would either be hal_json or json though I can't say for sure. You would have to go on to the 'Network' tab of your inspect option on your browser to analyze the response header.