react-jsonp 在 React 应用程序中给出 CORB 错误答案

【问题标题】：react-jsonp giving a CORB error in a React Appreact-jsonp 在 React 应用程序中给出 CORB 错误
【发布时间】：2022-01-16 23:36:53
【问题描述】：

编辑根据建议尝试使用 fetch 进行操作，现在我得到了这个

我正在尝试在一个简单的 react 应用程序中从 gnews.io/api 获取数据。我正在学习 React，解决方案可能很简单，但我被困在这里，无法弄清楚出了什么问题，我一直得到这个错误

fetch-jsonp.js:88 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://gnews.io/api/v4/top-headlines?country=us&token=myapi with MIME type application/json.

有趣的是，如果我复制这个网址https://gnews.io/api/v4/top-headlines?country=us&token=MYAPI&callback=jsonp_1642257010280_37644 并将其粘贴到浏览器中，我得到了所需的响应。

非常感谢任何形式的帮助

这是进行此 api 调用的 useEffect 函数

React.useEffect(()=> {
    async function getNewsdata(country){
        try {
            
            let url = `https://www.gnews.io/api/v4/top-headlines?country=pk&token=${API2}`
            let response = await fetchJsonp(url)
            let result = await response.json()
            
            console.log("News Data:", result)
                
                
        } catch (error) {
          console.log("error loading news data: ", error)  
        }
        
    }
    getNewsdata(props.country.trim())
    

},[])

【问题讨论】：

fetchJsonp 长什么样子？你能显示那个代码吗？
这个包github.com/camsong/fetch-jsonp
您的目标是旧浏览器吗？否则何不试试简单的fetch？
获取CORS错误，即使模式设置为“no-cors”也无法正常工作，我不想去服务器端打电话，肯定有办法它
我认为您使用了错误的域。尝试使用 gnews.io 而不是 www.gnews.io（它未为 CORS 配置）。

标签： reactjs cors fetch

【解决方案1】：

如今求助于JSONP 是不受欢迎的；对于跨域通信，有更安全的替代方案，例如 CORS。由于响应的内容类型是 application/json，因此无论如何使用 JSONP 都不会起作用，因为它会导致 Chrome's CORB feature 启动。

为什么不尝试解决您似乎遇到的任何 CORS 问题？如果您使用的 API 没有针对 CORS 进行配置，我会感到非常惊讶......对their documentation 的随意检查表明您使用了错误的域www.gnews.io，而不是gnews.io。前者重定向到后者，但是没有为 CORS 配置，这就解释了你的 CORS 问题。

一旦您使用了正确的域 (gnews.io)，您所有的 CORS 问题都将迎刃而解。而且由于不再需要使用 JSONP 之类的肮脏技巧，因此您可以使用可靠的老旧 fetch 而不是某些第三方工具。

React.useEffect(()=> {
  async function getNewsdata(country){
    try {        
      let url = `https://gnews.io/api/v4/top-headlines?country=pk&token=${API2}` // gnews.io, not www.gnews.io
      let response = await fetch(url) // fetch, not fetchJsonp
      let result = await response.json()      
      console.log("News Data:", result)
    } catch (error) {
      console.log("error loading news data: ", error)  
    }     
  }
  getNewsdata(props.country.trim())
},[])

【讨论】：