Monday, May 20, 2024
Homepage · node.js
 Popular · Latest · Hot · Upcoming
94
rated 0 times [  95] [ 1]  / answers: 1 / hits: 23243  / 6 Years ago, tue, july 31, 2018, 12:00:00

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

More From » node.js
 Answers
14

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 😀😀😀


[#53842] Thursday, July 26, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lara
Add To Favorites
Follow
Total Points: 462
Total Questions: 100
Total Answers: 102
Location: Jersey
Member since Mon, Jun 14, 2021
3 Years ago
lara questions
Thu, May 19, 22, 00:00, 2 Years ago
Tue, Jul 27, 21, 00:00, 3 Years ago
Thu, Apr 1, 21, 00:00, 3 Years ago
Mon, Jul 27, 20, 00:00, 4 Years ago
Tue, Mar 17, 20, 00:00, 4 Years ago
View All
;