skip to Main Content

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.

enter image description here

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


  1. You need the mod_proxy module and set up the ProxyPass directives:

    ProxyPass /api http://127.0.0.1:8888 
    ProxyPassReverse /api http://127.0.0.1:8888
    

    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.

    Login or Signup to reply.
  2. The port at Access-Control-Allow-Origin should be 3000

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search