Disabling CORS in local development

Problem Access to the XMLHttpRequest at ‘http://localhost:8084’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Frontend side Disabling CORS in https://stackoverflow.com/questions/46337471/how-to-allow-cors-in-react-js https://nabil6391.medium.com/avoid-cors-requests-for-a-react-app-2988e0061c1a https://reactjs.org/docs/cross-origin-errors.html <> Backend side https://howtodoinjava.com/spring-boot2/spring-cors-configuration/ Should we be doing this in prod? https://zetcode.com/springboot/cors/ https://www.baeldung.com/spring-cors https://www.baeldung.com/spring-security-cors-preflight If we use Spring Security in our project, we must take an extra step to make sure it plays well with CORS....

August 2, 2022 · 105 words · Peter Dieleman

React Select / Randomness

Sources https://mui.com/material-ui/react-select/ https://v3.mui.com/demos/selects/ Solve - No overload matches this call error in TypeScript # https://bobbyhadz.com/blog/typescript-no-overload-matches-this-call https://stackoverflow.com/questions/71499278/error-no-overload-matches-this-call-on-component-menuitem This is because of the MenuItem value. It is LiHTMLAttributes prop, and it only allows string | string[] | number. You can change the true/false values to yes/no and can easily convert into boolean.

May 16, 2022 · 50 words · Peter Dieleman

Runtime environment variables in React + nginx

Injecting Variables Through (b)ash https://github.com/facebook/create-react-app/issues/2353 https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/ https://medium.com/free-code-camp/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70 https://www.bencode.net/posts/react-build/ <– check https://sinclert.github.io/react-env-vars/ https://gist.github.com/lezhkin11/d6b0a14127b4920feaece278e5323ee1 Using a Multi-stage Dockerfile Another option is to use a multi-stage Docker file, where the first stage is still using nodeJS, like this. This way node can still parse the environment variables as you would during local development, and the final deployed image is. However, in large organizations deploying such a multistage container in a production environment may irk some SecOps people....

May 6, 2022 · 82 words · Peter Dieleman