reactjs - React 应用程序上的跨域读取阻塞,但不是 Laravel
问题描述
从旧版 Laravel 应用迁移到 React 前端。使用 Fetch 调用 API。它适用于 laravel(使用 fopen 和 stream_get_contents 获取数据),所以我知道这不是服务器问题,因为使用相同的本地主机。但是对于 React,使用 fetch 从 api 抓取数据却得到这个错误:
我已将内容类型更改为 application/json 以匹配标头,但仍然没有。我的回复正文是空的。当我转到 API 链接时,我得到一个 xml 文件,因此该链接有效,我可以在浏览器上看到它,但我的反应应用程序没有保存响应正文信息。
apiCall = () => {
const exampleAPILink = 'My_API_URL'
const config = {
method: 'GET',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
}
};
fetch(exampleAPILink, config).then(function(response){
console.log(response.body);
//null
}).catch(function(error){
console.log(error);
});
}
*我需要 'no-cors' 否则会收到 CORS 禁止访问错误。
解决方案
no-cors
意味着您告诉 fetch 您不打算做任何需要 CORS 许可的事情,并且它不应该要求它。
问题是您正在做一些需要 CORS 许可的事情。您正在尝试读取跨域响应。
结果是 CORBs 错误。
您需要更改模式cors
并更改您从中请求数据的服务器,以便授予权限。
您正在发出 GET 请求。Content-Type
在上面设置标题是没有意义的。没有描述类型的请求正文。
您可能会对Content-Type
.Accept
application/json
不是一个简单的 Content-Type,所以你不仅需要 CORS 权限来读取响应,而且浏览器会发送一个预检请求来请求权限以首先发送请求。
不要Content-Type
在 GET 请求上设置标头。
推荐阅读
- c# - 如何从 https URL 将 CSV 文件下载到字符串?
- c++ - 如何分解嵌套的 for 循环?
- node.js - 在 Google Cloud App Engine 上部署 Angular Universal 应用程序时出错
- go - 浮点精度golang
- python - 在服务器上创建和维护多个 Python 脚本的最佳实践
- sql - 如何在两个表中设置日期范围?
- javascript - 如何将屏幕阅读器可访问的文本与 video.js 元素相关联,例如播放按钮
- python - 如何停止尝试/除了循环回第一个输入?
- here-api - Fleet Telematics API 找不到路线
- javascript - 如何在脚本中的 PHP 代码中使用 Javascript 变量