javascript - mode: 'no-cors' working with fetch but fails for axios - Stack Overflow

admin管理员组

文章数量:1026221

I prefer axios over fetch because of its simplicity and ease-of-use. I am running a local dev server which sends AJAX requests to some remote endpoint. The request gets blocked due to the same-origin-policy. So I modified my webpack config like this:

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

Now if I use fetch for making API requests, I add "mode": "no-cors" to allow cross origin requests and everything works fine. However, this does not work with axios.

Whereas fetch is based on Request API, which allows specifying mode: "no-cors", axios is based on XHR, which has no support for specifying mode. I can work around the issue by opening an insecure chrome window by running chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security where --user-data-dir is some path of my file system. However, an insecure chrome instance won't allow extensions to run, so I can't use React and Redux DevTools. Here is a snippet that uses fetch and axios to make requests. The fetch call works while axios fails:

ponentDidMount() {
  fetch(someAPIEndpoint, {
    mode: 'no-cors',
  })
  .then(response => console.log(response))
  .catch(error => console.error(error))

  axios
  .get(someAPIEndpoint, {
      mode: 'no-cors',
  })
  .then(results => console.log(results))
  .catch(error => console.error(error))
}

Using a proxy server is not possible in my situation either. Is there any other workaround in code so that i can use axios and bypass this issue. Thanks in advance!!!

I prefer axios over fetch because of its simplicity and ease-of-use. I am running a local dev server which sends AJAX requests to some remote endpoint. The request gets blocked due to the same-origin-policy. So I modified my webpack config like this:

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

Now if I use fetch for making API requests, I add "mode": "no-cors" to allow cross origin requests and everything works fine. However, this does not work with axios.

Whereas fetch is based on Request API, which allows specifying mode: "no-cors", axios is based on XHR, which has no support for specifying mode. I can work around the issue by opening an insecure chrome window by running chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security where --user-data-dir is some path of my file system. However, an insecure chrome instance won't allow extensions to run, so I can't use React and Redux DevTools. Here is a snippet that uses fetch and axios to make requests. The fetch call works while axios fails:

ponentDidMount() {
  fetch(someAPIEndpoint, {
    mode: 'no-cors',
  })
  .then(response => console.log(response))
  .catch(error => console.error(error))

  axios
  .get(someAPIEndpoint, {
      mode: 'no-cors',
  })
  .then(results => console.log(results))
  .catch(error => console.error(error))
}

Using a proxy server is not possible in my situation either. Is there any other workaround in code so that i can use axios and bypass this issue. Thanks in advance!!!

本文标签： javascriptmode 39nocors39 working with fetch but fails for axiosStack Overflow