javascript - Reactjs - 类型错误 : Failed to execute 'fetch' on 'Window' : Failed to parse URL from ***. **.*.***:2000

Question

这是我的reactjs代码，我在获取时遇到问题。我已经使用 nodejs 创建了自己的 api，并尝试使用 get 方法检索一些演示 json。我对reactjs和nodejs使用相同的本地IP，是的，我使用不同的端口。

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')
);

获取失败后显示错误

  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

如果还有人遇到这个错误。 这是我的代码

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

我的网址错误。应该是这样的

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

如果控制台中的错误是这样的:

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.

意味着你必须在你的根js中添加cors

const cors = require('cors');

const app = express();

// allow cors origin requests

app.use(cors());

希望我有帮助。顺便说一句，这发生在我身上，所以也许我想我可以帮助其他有此错误的人。保重，祝你好运😀😀😀