Как исправить ошибку c CORS защитой или как исправить ошибку fetch?

Question

[svm2001]

Хочу получить список постов с Вконтакте к себе на страницу.
Обязательно прочтите комментарий в коде, там указал какие ошибки возникают при каких условиях

Делаю следующее:

const groupId = 3173117152; // для данного примера данные фейковые
  const accessToken = 'hO7HtP4aidsff6zaDOWQhU'; // для данного примера данные фейковые

  function createPostHTML(post) {
    let html = '<div>';
    html += `<h3>${post.text}</h3>`;
    html += `<p>${new Date(post.date * 1000).toLocaleString()}</p>`;
    html += '</div>';
    return html;
  }
  
  fetch(`https://api.vk.com/method/wall.get?owner_id=-${groupId}&access_token=${accessToken}&v=5.131`, {

//eсли я не указываю headers, то в консоли получаю ошибку с текстом: "Access to fetch at //'https://api.vk.com/method/wall.get?owner_id=-3173117152&access_token=hO7HtP4aidsff6zaDOWQhU&v=5.131' from //origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. // If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

// если я 'headers' указываю, получаю следующую ошибку: "Error: TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': The object must have a callable @@iterator property."

    source: '/:path*',
    headers: [
      { key: 'Access-Control-Allow-Credentials', value: 'true' },
      { key: 'Access-Control-Allow-Origin', value: '*' },
      { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
      { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization' },
    ],
  })
    .then(response => response.json())
    .then(data => {

      const posts = data.response.items;
      const postsHTML = posts.map(post => createPostHTML(post)).join('');
      document.querySelector('#posts').innerHTML = postsHTML;
    })
    .catch(error => console.error('Error:', error));

Кто сталкивался, плиз хелп

Answer 1

[Stalker_RED]

Посмотрите пример, там headers по другому указываются же.

Answer 2

[Антон Антон]

Вообще-то для CORS настройка должна проводиться на сервере, к которому делается запрос.
Без относительно вышенаписанного, в качестве headers должен быть объект, а не массив объектов (в данном случае это не поможет, просто на будущее):

{///
headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    }
///
}

Про ошибку без указания заголовков:
похоже, что веб страница запускается как файл, а не через веб сервер (хотя бы и localhost)