13

I have a react app, which uses a java ee backend rest server, running on another domain. I have enabled CORS:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Headers : origin, content-type, accept, authorization
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Max-Age : 1209600

I am using react with fetch like this:

export function get(path, headers) {
    return fetch(apiUrl + path, {
        "metod" : "GET",
        "headers" : headers,
        "credentials" : "include"
    })
}

My react app is running on http://localhost:3000. When I am logging in, the server returns the Set-Cookie, but the cookie is not included in any further request to the server, unless I try to log in again. Then it is included for that specific login request.

Any suggestions?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
fonnes
  • 509
  • 1
  • 3
  • 13
  • Is the cookie valid in terms of expiry, domain, path, etc? – robertklep May 02 '17 at 20:47
  • The server is returning this cookie `Set-Cookie: kek=qel4h9n27ov9ratshdrnqhrrhr; Version=1; Discard`, so I would believe so? – fonnes May 02 '17 at 20:51
  • Try setting an explicit path of `/` for the cookie (and also, if you want to set multiple cookies I believe you should use multiple `Set-Cookie` headers). – robertklep May 02 '17 at 21:09
  • I tried changing the path, but it resulted the same. Cookie: `Set-Cookie:kek=9rev41dpo3eq337m389bb9mbe5; Version=1; Path=/; Domain=http://localhost:8080; Max-Age=100000`. I am only using one cookie. – fonnes May 02 '17 at 21:18

4 Answers4

7

I just want to share how I make my local development painless by this post if you are using create-react-app by just adding your main API url proxy to your package.js for example "proxy": "http://localhost:8080/API" No need to setup CORS on your backend.

praHoc
  • 357
  • 4
  • 16
4

Install this.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

Once installed, click on his BrowserIcon and toggle on. It is all. You will not receive more error.

EDIT. Solution for Production If you want config it from your server (or simply not adding a browser extension, try this:)

  • If you are using node.js do the following: node.js server file: response.writeHead(200, { 'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' })

  • fetch('http://ajax.googleapis.com/ajax/services/feed/load?v=‌​1.0&num=8&q=http://r‌​ss.cnn.com/rss/editi‌​on_entertainment.rss‌​?output=rss', { method: 'get', mode: 'no-cors', }).then(() => { console.log('Works!'); });

  • Other solution:If you are using PHP too you can add: <?php header('Access-Control-Allow-Origin: *'); ?> into your PHP File. As I see, it is not the case, so... In your server (eg: Apache) add this directive: Header set Access-Control-Allow-Origin * in Settings (as the first option).

JuMoGar
  • 1,740
  • 2
  • 19
  • 46
3

So, I solved the problem by using another stackoverflow thread and robertklep's comment. As stated here: "When working on localhost, the cookie domain must be omitted entirely.". I implemented robertkleps idea, but did not set the domain. It resulted in a Set-Cookie like this: Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000. This works fine.

Community
  • 1
  • 1
fonnes
  • 509
  • 1
  • 3
  • 13
1

To add more on existing answers.

With react you can use "proxy" in your package.json to avoid CORS. Basically if you need to reach localhost:8100 (your java backend) and your react app run on localhost:3000

You can set:

In your package.json

"proxy": "http://localhost:8100"

And then when you want to make a get to /hello which would be an endpoint of your java API you can do:

import axios from 'axios';

axios.get('/hello')
  .then(resp => {
    console.log(resp.data);
  });

And it will be redirected to http://localhost:3000/hello so you will avoid CORS.

Sylhare
  • 5,907
  • 8
  • 64
  • 80