How to send authorization, cookie headers with javascript fetch API

Question

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');

Try this: Remove authorization from headers and pass it as object to separate prop auth like headers. — bh4r4th
– bh4r4th, Commented Jul 12, 2018 at 1:19

Roy Wang · Accepted Answer · 2018-07-12 01:08:53Z

2

+250

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.

answered Jul 12, 2018 at 1:08

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lance Over a year ago

This is added in the apache2/httpd.conf` file or the .htaccess file?

Roy Wang Over a year ago

It should be in httpd.conf.

Lance Over a year ago

Thank you. This worked. I added

<IfModule proxy_module>     ProxyPass /api http://localhost:8888     ProxyPassReverse /api http://localhost:8888 </IfModule>

and it worked after starting apache.

Nikita Malyschkin · Accepted Answer · 2018-07-12 16:01:41Z

0

The port at Access-Control-Allow-Origin should be 3000

answered Jul 12, 2018 at 16:01

Nikita Malyschkin

6924 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to send authorization, cookie headers with javascript fetch API

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related