Reactjs - TypeError：无法在“Window”上执行“fetch”：无法从 ***.**.*.***:2000 解析 URL答案

【问题标题】：Reactjs - TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL from ***.**.*.***:2000Reactjs - TypeError：无法在“Window”上执行“fetch”：无法从 ***.**.*.***:2000 解析 URL
【发布时间】：2019-01-07 16:41:34
【问题描述】：

这是我的 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

【问题讨论】：

这里提到了类似的问题。 stackoverflow.com/a/50161808/4510870
@NirajPaudel 不，它不是类似的错误。这是无效值，无法解析 url。
@ShivendraGupta 第二个参数是什么
您似乎混淆了错误消息所说的 URL 是问题所在。如果没有看到重现问题的代码，我们就无法判断问题所在。

标签： javascript node.js reactjs typescript

【解决方案1】：

如果有人仍然有错误。这是我的代码

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

我弄错了网址。应该是这样的

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

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

未能加载 http://...:2000/：对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。来源 'http://...:2000' 是因此不允许访问。如果不透明的响应满足您的需求，将请求的模式设置为“no-cors”以使用 CORS 获取资源已禁用。

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

const cors = require('cors');

const app = express();

// allow cors origin requests

app.use(cors());

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

【讨论】：

【解决方案2】：

这是我对代码所做的一些更新。首先我犯的错误是我在发送请求期间没有将 http:// 添加到我的 IP 地址。之后我又遇到了一个错误

未能加载 http://...:2000/：对预检的响应请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用 Origin 'http://...:2000' 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

这意味着我忘记添加 cors，有关如何在 express 节点中安装和使用 cors 的信息，可以从此链接获取 https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/

接受的答案是节点快递代码的例子。

【讨论】：