Saturday, December 31, 2016

react.js with PHP, cookies/CORS/session id etc

I am working on a react.js app on my Windows machine. Dev server is running on http://localhost:3000. While connection to my backend PHP server at http://mydomain.com, I ran into multiple issues related to CORS - Cross Origin Resource Sharing

Here are some problems and solution

If you want everything to work smoothly, do this
In your PHP code, add this:

header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Credentials: true");

or in your .htaccess file add this:
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true

and while sending requests from react.js, for which I was using fetch API, in every request add credentials: 'include'
fetch('http://mydomain.com/script.php,{credentials: 'include'}).then(function (response) {
return response.json()
}).then(function (resp) {
console.log(resp)
that.setState({blogList: resp})
})
---------------------------------
Another solution is to run Chrome like this: (this will disable CORS checks)
chrome.exe --disable-web-security --user-data-dir=c:\mydata

------------------------------------------
Another error message you may get depending upon your code/config is this: (but the above solution is perfect)
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true.
-------------------------
Another error you might encounter is this:(Even this problem will disappear if you follow the first solution)
1. PHP is sending PHPSESSID as a response cookie in your first request
2. But your next request is not using that cookie as a request cookie, or is using a different PHPSESSID


3 comments:

Best ReactJS Training in Hyderabad Ameerpet said...

Thanks for sharing a good case study to follow ReactJS users. keep share more useful information like this.

Blogger said...

BlueHost is definitely the best web-hosting company with plans for all of your hosting needs.

johnstany said...

Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing..
iOS App Development Company
Android App Development Company
Mobile App Development Company

Blog Archive