I used redux and I want to fetch my API using the cookies item like this:
import cookies from "js-cookies";
api/get_liste/${cookies.getItem("moncentre")}
when I run my app, ${cookies.getItem("moncentre")} is null.
My codesandbox: https://codesandbox.io/s/ecstatic-rubin-tf56r?file=/src/App.js:157-212
How can I fix it ?
So the problem here is, you never set a cookie in your app and then try to get the cookie that never exists so it will return null since there is no value for it in the browser cookies.
In order to set a cookie, you should do this (according to the package provider):
cookies.setItem('_code_sandbox_key', 'Cookie did set.')
The other thing that you facing is the warning that you get in your dev tools, so according to this doc, this console warning is not an error or an actual problem — Chrome is just spreading the word about this new standard to increase developer adoption. To fix this you should add SameSite="none Secure" (and then clear all your cookies with the dev tool) to let the browser know the script is not related to your site and that it is a third-party library that you are using.
<script src="https://kit.fontawesome.com/a076d05399.js" SameSite="none Secure"></script>
NOTE: You can follow this thread for more information.
Related
I'm a little surprised there is nothing out there about this that I have found. But just like the title says, I have a React SPA deployed to Netlify. It goes live without error. The only issue is, if the end user has been to the site before, they have to refresh the page to see any changes I have pushed out.
Is there something I need to add to the index file perhaps?
The browser caches the compiled js bundle.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
One of your options would be to disable it, or set cache expiration to a lower value during the intense development and increase it if/when you deploy less often.
Another option could be to implement some kind of API method to check if newer version has been deployed and trigger a page refresh. (Please be careful not to discard users work, like data filled in forms, during a refresh)
Each have pros and cons.
I don't get it, I see all these people talking about localStorage or sessionStorage yet in my React project I have undefined. How are they getting that object from a real Web API?
Examples:
persistent-state-reactjs
redux-sessionstorage
react-redux-jwt-auth-example
each one of these shows calling localStorage or sessionStorage but how? I don't see them using any libs to get to that. The only thing I can figure is they're using something like phantom or casper?? I only see phantom in the package.json of that third url. Even so, I don't see how he's pluging up Phantom and if not how does he have an instance of localStorage?
localStorage and sessionStorage are built-in objects from the Web API, so you don't need any libraries to use them IF you are using them in the front end. My guess is that, localStorage and sessionStorage is not available because your react app is server rendered. You can test them by running the code below somewhere in your app. If they don't exists and you still want your app to be server rendered, you may use a library such as this one: https://www.npmjs.com/package/web-storage.
try {
// localstorage or sessionstorage init
// ...
} catch (e) {
// they are not defined, use a library
console.log(e); // look at error
// if localStorage is not defined, use a library
window.localStorage = require('web-storage')().localStorage;
}
Hope this helps.
So I am quite new to this, and have a tight timeline, so here goes nothing. I am trying to create a login system using express and passport for the backend, and react redux in the front end wrapped into electron. I have the login working for the backend when using postman, but when I am using react the session cookie is not being passed to the frontend, so it is not allowing me to login or stay logged in.
I should add I am also using isomorphic fetch.
So essentially Electron doesn't play nice with cookies by default, so the cookie was being passed to the FrontEnd, but electron wouldn't see it.
There are two ways to solve, one for more up to date versions of Electron and one for other versions.
For newer versions, include this in your main render path. (Not in the one with the browser info).
const {session} = require('electron')
It should allow from there. Otherwise refer to
Where to place electron-cookies?
Have a hack is not and can post later if someone can't get either to work. Thought I would comment so others know.
I want to load test DRUPAL by JMeter, but when I run my test plan (it is about updating cart in drupal commerce) it gives me this error:"The form has become outdated. Copy any unsaved work in the form below and then reload this page."
I think the value of form-token is invalid. I use regular expressin for form-token with this regular expression: name="form_token" value="(.+?)".it still does not update cart
How can I solve this problem?
There could be a lot of different reasons for this, most probably:
Missing HTTP Cookie Manager
Missing or improperly working correlation
The solution is comparing the request, which is being generated by JMeter with the request, coming from the real browser - they need to be identical (apart from dynamic bits like cookies or this form_param).
In JMeter you can use View Results Tree listener to check request and response details, variables and cookie values, etc.
In browser you should have developer tools option which allows inspecting the same
The simple thing of calling FB.init (right before </body>) and then FB.getLoginStatus(callback) doesn't fire the callback function.
After some debugging, I think the SDK is stuck in the "loading" (i.e. FB.Auth._loadState == 'loading') phase and never gets to "loaded", so all callbacks are queued until the SDK has loaded.
If I force-fire the "loaded" event during debugging - with FB.Event.fire('FB.loginStatus', 'loaded') in case you're intersted - then the callbacks are invoked correctly.
Extra details that might be relevant:
My app is a facebook iframe app (loaded via apps.facebook.com/myapp)
I'm using IE9. The same behavior happens in Chrome
The app is hosted in http://localhost
What's going on? Why is the SDK never gets to loaded?
Thanks
UPDATE: Just tried it on Chrome and it worked (not sure why it didn't work before). Still doesn't work in IE
I had this same problem in Firefox 3.5 on Windows, but only on the very first log in to the page (probably because it was a slower machine and there was some weird timing issues going on).
I fixed it by forcing FB to refresh the login status cookie every time it checks:
FB.getLoginStatus(callback, true); //second argument forces a refresh from Facebook's server.
Without "force=true", sometimes it wouldn't fire the callback.
I had the exact same problem, and I solved it disabling "Secure Browsing" in the Facebook Security settings. Keeping Secure Browsing on forces the pages as "https", but I had no "Secure Canvas URL" set up, and this gave me a lot of errors in the console as well.
Hope this may help someone :)
In my experience, getLoginStatus() never calls the callback in Firefox when third-party cookies are disabled.
The original poster mentioned his application is hosted on http://localhost. I've never had luck with that, and believe it will cause problems.
Just today, I've had problems where getLoginStatus is not calling the callback on any browser, unless the user is actually connected to the app! I'm hoping this is a bug on facebook's end that they will solve.
Yet another possibility for FB.getLoginStatus not firing its callback is when using a "test" user account that has not been authorized to view that application. Its pretty bad that facebook doesn't give you any error messages.
I have also seen failed callbacks on bad appIds and redirectUrls.
I also ran into this issue specifically in Chrome. I tried calling it on page load and after a user-initiated action with no success.
It turned out that it was not a cross-domain issue. The getLoginStatus() call was being blocked by the Un-Passwordise extension in Chrome. As soon as I disabled the extension, it worked perfectly, even on page load.
More info about this issue here: Chrome-only cross-domain scripting errs in Facebook iFrame App upon FB.Login(..)
I understand that this question is a little old now, but I ran across it searching for solutions.
Double-check what you have set in your Facebook app configuration under the section "Website with Facebook Login". The Site URL domain must match the domain your page with the FB.getLoginStatus (and other related auth Javascript) is served from.
After hours of struggling, I realized that I could not reuse an existing app configuration I had on a new server and had to create a new app to handle the website login for this new server.
The other answers are probably equally valid in your specific case, but since there may be others like me who have struggled for a while on this, hopefully this gives you one other place to check. Making a new app with the correct Site URL was the answer in my particular case.