Geek Answers Handbook

React Application Using API with a Different Source (CORS)

I have a response application that uses a java ee database shutdown server running in a different domain. I have included 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 use the reaction with fetch as follows:

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

My response application runs on http://localhost:3000 . When I log in, the server returns a Set-Cookie, but the cookie is not included in any further request to the server unless I try to log in again. It is then turned on for that particular login request.

Any suggestions?

+5
source share
2 answers

So, I solved the problem using another stackoverflow and comment by robertklep. As stated here : "When working on localhost, the cookie domain must be completely omitted." I implemented the idea of ​​robertkleps but did not set a domain. This led to the creation of a Set-Cookie: Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000 Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000 Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000 . It works great.

+1
source

Install it.

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

After installation, click on its BrowserIcon and turn it on. It's all. You will not get any more errors.

EDIT. Production Solution If you want to configure it from your server (or just without adding a browser extension, try the following :)

  • If you are using node.js, follow these steps: 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!'); });

  • Another solution. If you also use PHP, you can add: <?php header('Access-Control-Allow-Origin: *'); ?> <?php header('Access-Control-Allow-Origin: *'); ?> to your PHP file. As I see it, this is not so, therefore ... On your server (for example: Apache) add this directive: Header set Access-Control-Allow-Origin * in the settings (as the first option).

+1
source

More articles:


All Articles