React应用程序不会与Apollo客户端冲突,跨域错误

时间:2019-12-15 16:02:51

标签: reactjs cross-domain apollo react-apollo apollo-client

使用apollo客户端和apollo提供程序时,显示跨域错误。我读到您需要添加 crossorigin 来标记脚本,但是index.html文件中没有标记。如何解决? 链接到代码沙盒上的项目:https://codesandbox.io/s/brave-smoke-g5f0u

显示错误,我不知道如何解决 enter image description here

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./Components/App";

import "./styles.css";

ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React from "react";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";
import { InMemoryCache } from "apollo-cache-inmemory";
import Personal from "./Personal";
import Header from "./Header";

const client = new ApolloClient({
  uri: "https://api.github.com/graphql",
  cache: new InMemoryCache()
});

const App = () => (
  <ApolloProvider client={client}>
    <Header />
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Personal} />
      </Switch>
    </BrowserRouter>
  </ApolloProvider>
);

export default App;

Header.js

import React from "react";
import { Link } from "react-router-dom";

export default class Header extends React.Component {
  render() {
    return (
      <div id="nav">
        <ul>
          <li>
            <Link to="/">Главная</Link>
          </li>
          <li>
            <Link to="/search">Поиск</Link>
          </li>
        </ul>
      </div>
    );
  }
}

Personal.js

import React from "react";

export default class Personal extends React.Component {
  render() {
    return <div />;
  }
}

1 个答案:

答案 0 :(得分:1)

这不是React-Apollo错误! 您的标头应位于BrowserRouter组件下

<ApolloProvider client={client}>
    <BrowserRouter>
      <Header />
      <Switch>
        <Route exact path="/" component={Personal} />
      </Switch>
    </BrowserRouter>
  </ApolloProvider>