如何解决一个人如何部署带有Create-React-App的Apollo服务器?
我正在尝试将我的应用程序部署到生产环境中,但是在将它们全部连接在一起时遇到了一些麻烦。
我的前端有一个create-react-app
,它由一个简单的快速服务器提供服务。在后端,我已经成功NGINX
代理到我的API服务器,该服务器正在使用Apollo提供数据。该API在端口4000上运行。
Apollo服务器如下,并且运行良好:
import { resolve } from "path";
import dotenv from "dotenv";
const envi = process.env.NODE_ENV;
dotenv.config({ path: resolve(__dirname,`../.${envi}.env`) });
import "reflect-metadata";
import { connect } from "./mongodb/connect";
import { buildSchema } from "type-graphql";
import { ApolloServer } from "apollo-server";
import { SenateCommitteeResolver,HouseCommitteeResolver } from "./resolvers";
import { populateDatabase } from "./util";
(async () => {
// Connect to MongoDB
await connect();
console.log(`? Databases connected`);
const schema = await buildSchema({
resolvers: [HouseCommitteeResolver,SenateCommitteeResolver],emitSchemaFile: resolve(__dirname,"schema.gql"),});
// If development,set database docs
envi === "development" && (await populateDatabase());
// Launch the server!
const server = new ApolloServer({
schema,playground: true,});
// Server listens at URL
const { url } = await server.listen(4000);
console.log(`? Server ready,at ${url}`);
})();
我正在尝试将快递服务器连接到Apollo服务器,但这是我遇到问题的地方。该应用程序应该使用Apollo的客户端和HTTP链接进行连接,因为我也在前端使用Apollo客户端:
import React,{ useEffect } from "react";
import { AppRouter } from "./routers";
import ReactGA from "react-ga";
import { ApolloProvider } from "@apollo/client";
import client from "./graphql/client";
import "./styles/index.scss";
function App(): React.ReactElement {
return (
<ApolloProvider client={client}>
<AppRouter />
</ApolloProvider>
);
}
export default App;
这是客户端文件:
import { ApolloClient,InMemoryCache,createHttpLink } from "@apollo/client";
const httpLink = createHttpLink({ uri: process.env.REACT_APP_API as string });
const cache = new InMemoryCache();
const client = new ApolloClient({
link: httpLink,cache,connectToDevTools: true,});
export default client;
但是,当用户导航到该站点并且站点本身尝试向我的后端发出请求时,我收到了CORS错误:
Access to fetch at 'https://www.cloture.app/' from origin 'https://cloture.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs,set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
出了什么问题?如何将Apollo的客户端与后端的Apollo服务器连接?
解决方法
在此处添加它,因为建议需要一些代码。
尝试添加:
const server = new ApolloServer({
schema,playground: true,cors: {
origin: "*" // it will allow any client to access the server,but you can add specific url also
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。