React Iframe: Accessing localhost with different port numbers results in cross origin security error-CodePudding

I am working on setting iframe and stuck with local testing. I have my app running on localhost:3000

I have setup Iframe in my app with src url set to localhost:1234 for local testing. I was hoping accessing via local host would resolve the cross origin error but looks like since port numbers are different, this doesn't seem to work

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

I have looked into various stack overflow posts and tried disabling chrome web security, even then this doesn't seem to let me do some local testing.

Any suggestions on how to prevent the cross origin error in this case?

Thanks!

CodePudding user response：

I was able to do local testing via Safari following the steps here:

Safari -> Preferences -> Advanced

then at the bottom tick Show Develop Menu in menu bar

then in the Develop Menu tick Disable Cross-Origin Restrictions

CodePudding user response：

Your app (the backend) should send a CORS header (from localhost:3000 if I understand correctly). A different port (just like a different hostname) counts as a different origin, so the same origin policy applies to requests, and you have to explicitly enable cross-origin requests.

The way to do so is your "backend" must send

Access-Control-Allow-Origin: localhost:1234

if that's where your frontend app is running. For development, you can also send

Access-Control-Allow-Origin: *

Don't do this in later stages of your pipeline and especially not in production as you might open your app to further vulnerabilities (CSRF).

If your frontend app uses cookies to authenticate cross-origin, the backend must also send Access-Control-Allow-Credentials: true, and your frontend javascript must add withCredentials: true to the request. However, it doesn't sound like this is the case for you.