CORS issue on the frontend while trying to make a POST request.

[AlkenD]

CORS issue on the frontend while trying to make a POST request.

[polterguy]

NP, we live to serve :)

Let us know if you've got other issues, they help us improve the platform. One thing this particular question made me started pondering, was how to dynamically apply a CORS profile, without having to restart the backend (which isn't always a choice) ... :)

[polterguy]

that would be awesome cause if the user forget's to add the dashboard url then he has no choice left other than re deploying the entire thing

I know, and it's a drag. I'm not sure if this is even possible, but I'll try to figure it out ;)

[polterguy]

Did you try to explicitly add the frontend URL of http://localhost:3000 to the following section ...?

{
  "magic": {
    "frontend": {
      "urls": "http://localhost:3000"
    },

The above allows for supplying a comma separated list of frontend URLs. I can't remember, but I think you'll need the "scheme" parts too (the http:// or https:// parts)

Also, I can't quite remember, but I suspect you'll have to "reboot" your backend (restart it) since the setting is unfortunately only read during startup of the app ...

[AlkenD]

Ahh it needed a restart to solve the problem. Btw is there a way to allow all origns aswell ?

[AlkenD]

btw i encountered one more issue after restarting the backend the frontend is unable to detect it.

[polterguy]

Btw is there a way to allow all origins as well

Yes, this is what it does by default - However, Google Chrome prevents the request for security reasons, which is kind of a drag for us, since one backend might in theory have an infinite amount of frontends. The idea from Chrome's perspective is to avoid sending credentials to some malicious site, injected somehow into the HTTP request object.

Personally I don't like CORS, and I think it's the "wrong solution to the wrong problem", something that can be seen by the fact of that it's the server declaring the CORS policy, but the client that's enforcing it, resulting in a somewhat ridiculous security model where the client can choose to ignore it - But it is what it is I suspect ... :/

You might try to play with the withCredentials parts of your HTTP object in React, and manually add the Authorization HTTP header instead, which should in theory allow you to ignore CORS ...

As to your second problem, open the Chrome developer's tools and let me know what it says ...

The simplest would be to remove the withCredentials parts from your frontend React code I suspect, remove all CORS from config, and manually add the Authorization HTTP header somehow. The only place I have previously encountered Magic actually needing withCredentials is as I am doing LDAP or some other "fancy" stuff that shouldn't be necessary unless you want to build a "domain SSO authentication thing" (I don't recommend it ...)

[AlkenD]

that's this helped me a lot to understand on some of the aspects of what to take care of in the future as for the second problem here are the chrome logs

i presume that the dashboard faces a cors either cause of the specified frontend urls that i configured else something else

and thanks for helping me clear these issue and amazing work with this project as a frontend dev it is hard to force myself to learn the backend stuff dunno why 😂. Either way hope this project grows even more

[polterguy]

Thank you, I'll convey the nice words to the rest of our team, they'll appreciate it ^_^

Psst, so you're good now or ...?

[AlkenD]

Unfortunately the issue is not resolved. these was another response that i forgot to mention it.

and since i have no way to change anything in the magic.config ill have to re deploy the container and then see if i have to add the dashboard url as well but this shouldn’t be the case as the dashboard is supposed to work with the backend without any configuration

[polterguy]

If you add one CORS frontend, you'll have to add all CORS frontend. If you've got your React frontend running at http://localhost:3000 and your Magic Dashboard running on http://localhost:5555 (Docker images), this results in the following config ...

{
  "magic": {
    "frontend": {
      "urls": "http://localhost:3000, http://localhost:5555"
    },

The reason is that the default CORS setting is "accept everything", which crashes with your withCredentials setting on your React HTTP request object. This results in that you've got two options.

• Remove CORS entirely and remove the withCredentials property on your React HTTP request object
• Add all frontends that are supposed to access your backend (through a browser) in your above frontend:urls configuration setting ...

Let me know if this fixes things for you ...

[AlkenD]

If you add one CORS frontend, you'll have to add all CORS frontend. If you've got your React frontend running at http://localhost:3000 and your Magic Dashboard running on http://localhost:5555 (Docker images), this results in the following config ...

{
  "magic": {
    "frontend": {
      "urls": "http://localhost:3000, http://localhost:5555"
    },

The reason is that the default CORS setting is "accept everything", which crashes with your withCredentials setting on your React HTTP request object. This results in that you've got two options.

• Remove CORS entirely and remove the withCredentials property on your React HTTP request object
• Add all frontends that are supposed to access your backend (through a browser) in your above frontend:urls configuration setting ...

Let me know if this fixes things for you ...

Yup its working now thanks a lot for your help 🥳

[AlkenD]

NP, we live to serve :)

Let us know if you've got other issues, they help us improve the platform. One thing this particular question made me started pondering, was how to dynamically apply a CORS profile, without having to restart the backend (which isn't always a choice) ... :)

that would be awesome cause if the user forget's to add the dashboard url then he has no choice left other than re deploying the entire thing