I use http-proxy-middleware to get my cross origin data, it worked in browser, but didn't in react.

It returned GET http://localhost:3000/api 403 (Forbidden) and Uncaught (in promise) Error: Request failed with status code 403

react

export default memo(function Component() {
  useEffect(() => axios.get('/api').then(res => console.log(res.data)), [])
    return (
    <div>
      // ....
    </div>)
});

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {
            target: 'api.com',
            changeOrigin: true,
            pathRewrite: {
                '/api': ''
            }
        })
    )
}

I checked the differences between 403 and 200 headers, only Sec-Fetch- headers are different.