reactjs - 以外部 api 为前缀的任何地方的 CORS 都需要 400 标头

Question

我正在使用 React 并希望显示来自外部 api 的图像，并在该 api 前面加上 CORS 任何 url。但我收到此错误消息：

GET https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c 400 (Header required)

我一直在寻找解决方案，但我只找到有关如何在服务器端解决此问题的解决方案。但由于这是一个外部 api，我不能这样做。有什么解决办法吗？

这是我的代码：

export const SingleProductImage = (props) => {
  const [articleImg, setArticleImg] = useState('')
  console.log(articleImg)
  console.log(props.fileid)

  useEffect(() => {
    fetch(`https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/archive/${props.fileid}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret,
      }
    })

      .then((res) => {
        setArticleImg(res.url)
      
      })
      .catch((err) => console.log(err))
  }, [props.fileid])

  return (
    <div>
      <img src={articleImg} alt="product" className="img" />
    </div>
  )
}

谢谢！！

标签： reactjserror-handlingreact-hookshttp-status-code-400cors-anywhere

Answer 1

您尝试代理的 URL 目前似乎无法通过 cors-anywhere.herokuapp.com 访问

更多信息：https ://github.com/Rob--W/cors-anywhere/issues/39