I’m trying to send authorization headers to a API endpoint that is running on 127.0.0.1:8888 from a react app running on 127.0.0.1:3000.
var data = new URLSearchParams();
data.append('code', code);
fetch('http://localhost:8888/users/verifyEmail', {
method: 'POST',
credentials: 'include',
headers: {
'authorization': 'Bearer '+ bearer,
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
body: data
})
The requests gets set to an OPTIONS
instead of a POST
.
In my endpoint that accepts the request I have the headers set
header('Access-Control-Allow-Origin: http://localhost:8888/');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: authorization, bearer, content-type, accept');
2
Answers
You need the mod_proxy module and set up the
ProxyPass
directives:Then in your React app, all http requests to https://example.com/api (you can use
`${window.location.origin}/api`
to avoid hardcoding your website url) will be proxied to your server instead, with cookies preserved.The port at
Access-Control-Allow-Origin
should be 3000