Reactjs - TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL from ***.**.*.***:2000
Solution 1
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 😀😀😀
Solution 2
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.
Comments
-
Biswajit almost 2 years
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
-
nirazlatu over 5 yearsSimilar issue was mentioned here. stackoverflow.com/a/50161808/4510870
-
Biswajit over 5 years@NirajPaudel No its not similar error. that is invalid value and this is failed to parse url.
-
Biswajit over 5 years@ShivendraGupta what is second argument
-
Quentin over 5 yearsIt looks like you have obfuscated the URL that the error message says is the problem. We can't tell what the problem is without seeing code that reproduces the problem.
-