提取API无法加载，CORS [英] Fetch API cannot load, cors

问题描述

在我的 React 应用程序中，我试图从heroku服务器发出 GET 请求以获取用户列表:

In my React app I am trying to make a GET request from my heroku server to get a list of users:

https://blablabla.heroku.com/users

使用以下请求:

const sendSearch = fetch('/https://blablabla.heroku.com/users', {credentials: 'same-origin'})

function loadMyUsers(data) {
  data.json().then((jsonData) => {
    // console.log(jsonData)

  })
}

sendSearch.then(loadMyUsers)}

但是我遇到以下错误:

Fetch API cannot load https://blablabla.heroku.com/users.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. If an opaque response serves your needs, set the request's mode
to 'no-cors' to fetch the resource with CORS disabled.

我尝试将Fetch方法更改为类似于以下内容的许多东西:

I tried changing my Fetch method to many things similar to:

const sendSearch = fetch('https://blablabla.heroku.com/users',{
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'mode': 'no-cors'
  }
})

但是问题仍然存在.

如何提出跨域请求?

推荐答案

在您的Heroku服务器上，您应该在响应标头中添加 Access-Control-Allow-Origin:* ，或更具体的访问控制允许来源:http://localhost:8080 (如果需要).

On your heroku server you should add Access-Control-Allow-Origin: * to your response headers, or more specific Access-Control-Allow-Origin: http://localhost:8080 if you wish.

但是，在生产服务器上，除非有充分的理由要求跨源请求，否则可能不需要此标头.

On your production server though, you probably won't need this header, unless you have very good reason for cross origin requests.

这篇关于提取API无法加载，CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！