我想在不禁用浏览器的CORS的情况下进行API调用。该应用程序是使用react-create-app创建的,它使用webpack和webpackDevServer进行开发。在这里找到的所有答案都建议将以下代码放入我的
然而,我已经在许多不同的地方尝试过它,但它并没有起作用。我一直收到错误消息:
“无法加载资源:服务器响应了500()状态”
还有:
“无法加载……预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,源'http://localhost:3000'不能访问。响应的HTTP状态代码为500。”
我还试图将我的axios调用更改为fetch调用。
那让我更接近了,但控制台现在返回的是
webpack.config
文件中。devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
然而,我已经在许多不同的地方尝试过它,但它并没有起作用。我一直收到错误消息:
“无法加载资源:服务器响应了500()状态”
还有:
“无法加载……预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,源'http://localhost:3000'不能访问。响应的HTTP状态代码为500。”
我还试图将我的axios调用更改为fetch调用。
return fetch(process.env.REACT_APP_API_URL + "/prod/user", {
mode: 'no-cors',
credentials: 'include',
method: "GET",
headers: {
"x-api-key": process.env.REACT_APP_API_KEY
}
})
.then(response => {
return response.json()
})
.then(resp => dispatch(receiveUsers(resp.data)))
.catch(error => {console.log(error)})
那让我更接近了,但控制台现在返回的是
Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
如何解决这个跨域问题?感谢您的帮助!
响应/请求头
Origin 'http://localhost:3000' is therefore not allowed access.
因此,添加localhost
和localhost:3000
。如果你没有访问权限,那么你需要代理请求。 - Sebastijan Dumančić