react.js | how to get rid of cross-origin error in Codesandbox

Question

IN FIREFOX: When I execute my code the typical error I should get is: "TypeError: Cannot read property 'setState' of undefined", instead I received a very weird cross-origin error.

Here is a screenshot of the error: http://prntscr.com/iwipnb

Error A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/docs/cross-origin-errors.html for more information.

here is my code: https://codesandbox.io/s/4885l37xrw

How can I avoid the cross-origin error in Codesandbox in FIREFOX?

EDIT1: I know what is the code bug (bind(this)). I'm looking for the cross-origin error firefox problem. Thanks

@lito did you try running this code with create-react-app? Did you verify the CORS issue disappears on FF 59.0.1 when you do so? If so, I think this can be concluded as a bug in codesandbox.io. — duhaime, Mar 28 '18 at 10:40

duhaime · Answer 1 · 2018-03-26T14:31:37.423

2

It looks like you need to enable CORS on your S3 bucket that serves: https://s3-eu-west-1.amazonaws.com/codesandbox-downtime/downtime.json

To do so, just navigate to your bucket, then click the Permissions tab, then in the CORS box enter an XML document with the permissions you'd like. Sample permissions to allow any host to make a GET request:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

edited Mar 26 '18 at 14:31

answered Mar 26 '18 at 14:08

duhaime

25,611
17
169
224

Hi! thanks. I think I didn't explain myself well. I know the solution in terms of code. I want to know the fix to avoid the cross-origin error in Codesandbox in FIREFOX. – lito Mar 26 '18 at 14:14
1

I'm not sure what you mean. The updated code runs fine without cross-origin errors in Firefox 59.0.1. What's your FF version? – duhaime Mar 26 '18 at 14:16
I also have FF 59.0.1. Do you think this is a config in FF? – lito Mar 26 '18 at 14:20
2

My hunch is this is due to a request made by codesandbox.io for resources when the error triggers. I'm checking a little deeper... – duhaime Mar 26 '18 at 14:23
Do you have any idea why it does work fine in Chrome but not in FF? – lito Mar 26 '18 at 14:59
1

@lito it's a bug on codesandbox. Use `create-react-app` with your two components and you'll see there's no CORS error thrown. – duhaime Mar 26 '18 at 15:25

Amit Kashyap · Answer 2 · 2018-08-22T08:25:18.320

1

Add this in API file constructor

public function __construct($config = 'rest'){
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
   header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      parent::__construct();
    }

edited Aug 22 '18 at 08:25

answered Aug 22 '18 at 07:07

Amit Kashyap

253
1
4
12

score 1 · Answer 3 · edited Sep 28 '20 at 08:51

1

I have my server setup to support CORS and it's still giving me this error.

It looks like an issue with ReactJS if there is an error while processing a response from the server. In my case it was happening while trying to parse invalid response into JSON.

edited Sep 28 '20 at 08:51

iminiki

2,549
12
35
45

answered Sep 28 '20 at 05:22

Chand

521
5
8

score 0 · Answer 4 · answered Jun 07 '18 at 03:32

You can use corsproxy to hit localhost API's from your local machines.

You first need to install the corsproxy npm package. npm install -g corsproxy
run corsproxy command on terminal
It will run on http://localhost:1337
Now what you need to do is append your api call with the above url. Lets say you need to hit localhost:3000/customer to hit api.

So new url will be http://localhost:1337/localhost:3000/customer

This will remove CORS error.

Do comments your queries in comments.

score 0 · Answer 5 · answered Dec 19 '19 at 13:43

0

The cross origin error mentioned in your question, is an open issue(as of Dec 2019) in Codesandbox's github repository.

Reactjs website explains about this under Cross-origin Errors

Not to be confused with Cross Origin Resource Sharing

answered Dec 19 '19 at 13:43

mdsadiq

788
1
9
11

react.js | how to get rid of cross-origin error in Codesandbox

5 Answers5