admin管理员组文章数量:1332339
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: []
};
}
ponentDidMount() {
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 AppponentDidMount (index.js:15)
at mitLifeCycles (react-dom.development.js:14361)
at mitAllLifeCycles (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 mitRoot (react-dom.development.js:15603)
at pleteRoot (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
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: []
};
}
ponentDidMount() {
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.ponentDidMount (index.js:15)
at mitLifeCycles (react-dom.development.js:14361)
at mitAllLifeCycles (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 mitRoot (react-dom.development.js:15603)
at pleteRoot (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
- Similar issue was mentioned here. stackoverflow./a/50161808/4510870 – nirazlatu Commented Jul 31, 2018 at 10:15
- @NirajPaudel No its not similar error. that is invalid value and this is failed to parse url. – Biswajit Commented Jul 31, 2018 at 10:29
- @ShivendraGupta what is second argument – Biswajit Commented Jul 31, 2018 at 10:41
- 2 It 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. – Quentin Commented Jul 31, 2018 at 10:47
2 Answers
Reset to default 2If 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
本文标签：
版权声明：本文标题：javascript - Reactjs - TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL fro 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742331901a2454862.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论