You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The proxy property in package.json doesn't quite do what is needed for my current project. The API provides some endpoints that are meant to be used as iFrame-URLs. If I use an API URL inside an iFrame while using the simple proxy property API calls caused by those iFrames don't get proxied because they include the header Accept: text/html. The result is that the iFrame displays the entire app instead of the API response. (Which is also funny because you can create an "appception" that way)
So I switched to setupProxy.js. The examples in the docs show a simple setup that looks like it should work the same way. But it doesn't. It causes the API server to respond with 403 Forbidden. The server (Java, Spring) produces the log Reject: 'https://localhost:9080' origin is not allowed. Where localhost:9080 is the URL where the React app is served by CRA.
The solution I found is to delete the origin header like this:
const{createProxyMiddleware: proxy}=require('http-proxy-middleware')module.exports=app=>{app.use('/api',(req,res,next)=>{if(req&&req.headers&&req.headers.origin){deletereq.headers.origin}next()})app.use('/api',proxy({target: ' ...URL of the server... '}))}
Neither changeOrigin: true nor changeOrigin: false work for me. So it seems the proxy property also implicitly removes the origin header.
This basically now proxies all requests that target /api/*, no matter what the value of the Accept header is.
I wanted to share this, maybe it helps some people out there.
Also, if someone knows how to improve this, please tell me and I'll update the code.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
The
proxy
property inpackage.json
doesn't quite do what is needed for my current project. The API provides some endpoints that are meant to be used as iFrame-URLs. If I use an API URL inside an iFrame while using the simpleproxy
property API calls caused by those iFrames don't get proxied because they include the headerAccept: text/html
. The result is that the iFrame displays the entire app instead of the API response. (Which is also funny because you can create an "appception" that way)So I switched to
setupProxy.js
. The examples in the docs show a simple setup that looks like it should work the same way. But it doesn't. It causes the API server to respond with403 Forbidden
. The server (Java, Spring) produces the logReject: 'https://localhost:9080' origin is not allowed
. Wherelocalhost:9080
is the URL where the React app is served by CRA.The solution I found is to delete the
origin
header like this:Neither
changeOrigin: true
norchangeOrigin: false
work for me. So it seems theproxy
property also implicitly removes theorigin
header.This basically now proxies all requests that target
/api/*
, no matter what the value of theAccept
header is.I wanted to share this, maybe it helps some people out there.
Also, if someone knows how to improve this, please tell me and I'll update the code.
Beta Was this translation helpful? Give feedback.
All reactions