React 应用程序不适用于 apollo 客户端,跨源错误
React application don't worl with apollo client, cross-origin error
使用apollo client和apollo provider时,显示跨域错误。我读到你需要添加 crossorigin 到标签 script,但是 index.html 文件中没有标签。这怎么能解决?
Link 到 Code SandBox 上的项目:https://codesandbox.io/s/brave-smoke-g5f0u
显示错误,我不知道如何解决
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 />;
}
}
这不是 react-apollo 错误!
您的 header 应该在 BrowserRouter 组件下
<ApolloProvider client={client}>
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/" component={Personal} />
</Switch>
</BrowserRouter>
</ApolloProvider>
使用apollo client和apollo provider时,显示跨域错误。我读到你需要添加 crossorigin 到标签 script,但是 index.html 文件中没有标签。这怎么能解决? Link 到 Code SandBox 上的项目:https://codesandbox.io/s/brave-smoke-g5f0u
显示错误,我不知道如何解决
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 />;
}
}
这不是 react-apollo 错误! 您的 header 应该在 BrowserRouter 组件下
<ApolloProvider client={client}>
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/" component={Personal} />
</Switch>
</BrowserRouter>
</ApolloProvider>