js fetch cors error with Access-Control-Allow-Origin

Question

I have such a generic method to send post requests

async function postData(uri = '', data = {}) {
  let url = process.env.VUE_APP_API_URL + uri;
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'omit',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });

  return await handleErrors(response)
}

function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

as you can see I set Access-Control-Allow-Origin to * , which means all URLs allowed, right? but for some reason I still see cors issue when sending POST requests, but Access-Control-Allow-Origin header exists in the request headers https://gyazo.com/f59fb77cc812f76952f7fbc243356415.

The *server* sets the header of the response, and if the response header doesn't permit your current domain, the browser will refuse to process the response — CertainPerformance, Aug 25 '20 at 15:22
umm, well but CORS is not enabled on the server, but if I set `mode` to `no-cors` on frontend I can't override content-type header... it's mean I need to enable cors on the server? — Bogdan Dubyk, Aug 25 '20 at 15:28

score 1 · Answer 1 · answered Aug 25 '20 at 15:24

1

Access-Control-Allow-Origin should be in response headers not request headers.

You need to set the header server side.

answered Aug 25 '20 at 15:24

Atul Sharma

9,397
10
38
65

js fetch cors error with Access-Control-Allow-Origin

1 Answers1