React. IE11 requests being blocked - reactjs

Im testing my react app in IE11 but all the requests I make to my server are blocked.
SCRIPT7002: XMLHTTPRequest: Network error 0x2efd, Couldnt complete the operation due a 00002efd error.
This happens when i try to do a post in a form.
Only happens in IE11.
I have already added IE11 Support adding this in index.tsx
import "react-app-polyfill/ie11";
I have already disabled browsers protected mode.

The issue was with IE11 being unable to read 3** codes. I had to chenge them all to 2**

Related

loading Stripe with React Stripe js fails with CORP error

I am working on a react application that is using React Stripe package to connect to Stripe.
I am trying to use Stripe PaymentElement to gather card information. Everything works fine in development mode but when I build the code for production and I deploy it on a test server I get this errors in the browser console:
The resource at “https://js.stripe.com/v3” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
How can I fix this error?

Why is a URL not fetching in my React app

In my React app I am making a simple fetch request:
useEffect(() => {
fetch('http://localhost:3000/').then((response) => console.log('foobar', response));
}, []);
This works fine. But when I try this with my real url like https://my-site.com/abc/token it doesn't work? When I try to fetch a different domain it doesn't work?
What could be the issue and how do I solve this?
Not many details in the post but I'll give it a go.
If you are receiving an error whilst in development similar to the one pictured below, then it means the server you are trying to contact does not allow the host you are developing on. This can be fixed either by either changing the security settings of your browser or installing a plugin that disables CORS.
However, if you are receiving this error in a non-local environment, then it means you should add the hostname of your frontend into the Access-Control-Allow-Origin on the serverside (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin).
Links for more details
Disable CORS in Chrome + Safari and the plugin for Firefox - https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa
Plugin for Chrome - Why does my http://localhost CORS origin not work?

ERROR: Firebase Database (${JSCORE_VERSION}) INTERNAL ASSERT FAILED: Reference.ts has not been loaded

I get error message when I am loading my Webapp with IE10 and below IE version.
I am building an my Webapp with React 15.4.0 and firebase 5.5.0.
I have tested the Webapp with Chrome, Firefox, IE11 and it's working fine.
Try to comment line below in file "firebase-js-sdk/src/database/api/Query.ts" may help you to solve this error.
assert(__referenceConstructor, 'Reference.ts has not been loaded');
Other work around are also available in link below that you can try to check.
Firebase Database (4.3.1) INTERNET ASSERT FAILED: Reference.ts has not been loaded.

React weird Firefox error

I've a react app and I'm getting this TypeError in Firefox, latest version, on chrome and safari it works fine.
message: "t.linkNamed(...).fetch(...).then(...).finally is not a function"
stack: "[1017]/h</t.prototype._fetch....."
I tried to debug it without much success. Any ideas?
Notice that fetch is supported on Chrome before it has been supported in your firefox . So it seems you are not using the native fetch . Even though, the response streaming is only supported on Chrome :
So you have two options:
Either add a polyfill for fetch.
Or migrate to another http client.
REFERENCE: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Debugging a React Azure Web App

I've got a React app running on Azure. It runs fine in my localhost, however, when I go to the Azure address, it doesn't load; all I get is a blank page with a head and body html element, which is throwing the following error:
Uncaught SyntaxError: Unexpected token <
The immediate question, of course, is what's causing the error and how do I fix it?
The bigger question in the background is, with a backend app, I can enable logging and look at a log stream and see what's throwing errors in real time. With a frontend app, the errors are happening in my browser; the React Chrome extension doesn't even recognize this as a React app. How do I debug in this context?

Resources