react-jsonp 在 React App 中给出 CORB 错误

Question

编辑根据建议尝试用 fetch 来做，现在我得到了这个

我正在尝试从 gnews 获取数据。io/api 在一个简单的反应中 app.I 正在学习 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.

有趣的是，如果我复制这个 url 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())
    

},[])

Answer 1

求助于 JSONP is frowned upon nowadays; there are safer alternatives, such as CORS, for cross-origin communication. As the response's content type is application/json, using JSONP will not work anyway because it causes 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())
},[])

react-jsonp 在 React App 中给出 CORB 错误

react-jsonp giving a CORB error in a React App

fetch

cors

reactjs