已被 CORS 策略通过使用 axios 和 fetch 在 react 中阻止

Question

我正在尝试对服务器进行发布请求，但使用 axios 并在 React 中获取不断收到 CORS 错误。

代码：

fetch('https://api/entries', 
    { mode: 'no-cors',
      method: 'post',
      headers: {
        "Content-Type":"application/octet-stream",
        'Access-Control-Allow-Origin': true
      }, 
      body: JSON.stringify({
        "KEY":"VALUE"
      })
    })
  .then((response) => {
    console.log(response) 
  })
  .catch(err => console.log(err))

或

axios({
      method: 'post',
      url: 'https://api/entries',
      headers: {
        "Content-Type":"application/octet-stream",
        'Access-Control-Allow-Origin': true
      }, 
      data: {
            "KEY":"VALUE"
      }
    })
    .then(response => {
          console.log(response);
        })
    .catch(err => console.log(err));

Axios 控制台响应

Access to XMLHttpRequest at 'https://api/entries' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

和另一个

提取控制台响应

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api/entries with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

谢谢

Answer 1

解决此问题的最佳和最简单的方法是使用代理 URL。

这样

const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
const URL = 'https://api/entries';
axios.post(PROXY_URL+URL)
.then( i => console.log(i) )
.catch(e => console.error( "Error occured! ", e));

在您的情况下，请尝试像这样使用它：这应该有效。

const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
const URL = 'https://api/entries';
axios({
  method: 'post',
  url: PROXY_URL+URL, 
  data: {
        "KEY":"VALUE"
  }
})
.then(response => {
      console.log(response);
    })
.catch(err => console.log(err));

您甚至可以将代理网址与fetch()一起使用

Answer 2

这取决于你的后端例如，如果你使用 Django您需要安装 https://github.com/ottoyiu/django-cors-headers并在设置文件中添加此 CORS_ORIGIN_ALLOW_ALL=True