Reactjs - TypeError：无法在“Window”上执行“fetch”：无法解析来自 ***.**.*.***:2000 的 URL

Question

This is my reactjs code and I am having problem with fetch. I have created own api using nodejs and trying to retrieve some demo json using get method. I am using same local IP for both reactjs and nodejs, yes i am using different port.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
        };
    }

    componentDidMount() {
        fetch(' ***.**.*.***:2000', {
            method: 'GET'
        })
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        items: result
                    });
                    console.log(result);
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });console.log(error)
                }
            )
    }
    render() {
            return (
                <ul>fdg
{/*                    {this.state.items.map(item => (
                        <li key={item.id}>
                            {item.name}
                        </li>
                    ))}*/}
                </ul>
            );

    }
}
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Error is shown after fetch is failed

  TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL
 from  ***.**.*.***:2000
         at App.componentDidMount (index.js:15)
         at commitLifeCycles (react-dom.development.js:14361)
         at commitAllLifeCycles (react-dom.development.js:15462)
         at HTMLUnknownElement.callCallback (react-dom.development.js:100)
         at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
         at invokeGuardedCallback (react-dom.development.js:187)
         at commitRoot (react-dom.development.js:15603)
         at completeRoot (react-dom.development.js:16618)
         at performWorkOnRoot (react-dom.development.js:16563)
         at performWork (react-dom.development.js:16482)
         at performSyncWork (react-dom.development.js:16454)
         at requestWork (react-dom.development.js:16354)
         at scheduleWork$1 (react-dom.development.js:16218)
         at scheduleRootUpdate (react-dom.development.js:16785)
         at updateContainerAtExpirationTime (react-dom.development.js:16812)
         at updateContainer (react-dom.development.js:16839)
         at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
 (react-dom.development.js:17122)
         at react-dom.development.js:17262
         at unbatchedUpdates (react-dom.development.js:16679)
         at legacyRenderSubtreeIntoContainer (react-dom.development.js:17258)
         at Object.render (react-dom.development.js:17317)
         at Object../src/index.js (index.js:48)
         at __webpack_require__ (bootstrap d08df1f09c74587853fb:678)
         at fn (bootstrap d08df1f09c74587853fb:88)
         at Object.0 (index.js:49)
         at __webpack_require__ (bootstrap d08df1f09c74587853fb:678)
         at ./node_modules/ansi-regex/index.js.module.exports (bootstrap d08df1f09c74587853fb:724)
         at bootstrap d08df1f09c74587853fb:724

Answer 1

Here is is some update that i made to code. First i made mistake is i didnt add http:// to my IP address during sending request. After doing that i got another error

Failed to load http:// . . . :2000/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// . . . :2000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Which means i am forgetting to add cors, Information about How to install and use cors inside your express node, can get from this link https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/

Accepted answer is the example of node express code.

Answer 2

This error is caused because of server side node express is incomplete. We need to add express().use("*",cors()) to express to work.

Soln:-

var express = require('express');
var cors = require('cors');

var app = express().use("*",cors());
var router = app.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
   // Comment out this line:
   //res.send('respond with a resource');

   // And insert something like this instead:
   res.json([{
       id: 1,
       username: "samsepi0l"
   }, {
       id: 2,
       username: "D0loresH4ze"
   }]);
});

module.exports = router;

Answer 3

If anyone still has the error. this is my code

const client = new ApolloClient({
  uri: 'http://localhost:4000:graphql',
});

I got the url wrong. Should be like this

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

and if the error in the console is like this:

Failed to load http://...:2000/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://...:2000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Means you have to add cors in your root js

const cors = require('cors');

const app = express();

// allow cors origin requests

app.use(cors());

Hope I helped. By the way this happened to me so maybe I thought I could help others who has this error. Take Care and Good Luck 😀😀😀