cors错误：没有'Access-Control-Allow-Origin'标头apollo-server-express答案

【问题标题】：cors error: No 'Access-Control-Allow-Origin' header apollo-server-expresscors错误：没有'Access-Control-Allow-Origin'标头apollo-server-express
【发布时间】：2021-02-20 08:32:35
【问题描述】：

我使用 apollo express server，apollo client 3.0 创建了一个项目。我在图片上传端收到一个 cors 错误。我的服务器端是这样的。

注意：它会加载大小为 1 kb 的图像。但是每个具有高 kb 错误的图像都会产生 cors 错误。有时会上传一半的图片。

图片上传到 s3。

注意 2：localhost 也可以正常工作。

我正在使用客户端 apollo-upload-client 进行上传。客户端没有cors设置。

我在 url 上尝试了 cors 选项的来源，但它仍然不起作用。

const http = require("http");
const express = require("express");
require("dotenv").config();
const mongoose = require("mongoose");
const jwt = require("jsonwebtoken");
const { PubSub } = require("apollo-server");
const { ApolloServer } = require("apollo-server-express");
const { importSchema } = require("graphql-import");
const { GraphQLUpload, graphqlUploadExpress } = require("graphql-upload");
const GraphQLJSON = require("graphql-type-json");
const cors        = require("cors");
const bodyParser = require('body-parser')

// RESOLVERS
const resolvers = require("./graphql/resolvers/index");

const resolveFunctions = {
  JSON: GraphQLJSON,
  Upload: GraphQLUpload
};

// models

const Admin = require("./models/Admin");
const Customer = require("./models/Customers");

const pubsub = new PubSub();
const app = express();

var corsOptions = {
  origin: '*',
  credentials: true
};

// SCHEMA
const server = new ApolloServer({
  cors: corsOptions,
  typeDefs: importSchema("./graphql/schema.graphql"),
  resolvers,
  resolveFunctions,
  context: ({ req }) => ({
    Admin,
    Customer,
    pubsub,
    activeAdmin: req ? req.activeAdmin : null
  })
});


// DB
mongoose
  .connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
  })
  .then(() => console.log("Connected to MongoDB"))
  .catch(e => console.log(e));



app.use(async (req, res, next) => {
  graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 });
  const token = req.headers["authorization"];
  if (token && token !== "null") {
    try {
      const activeAdmin = await jwt.verify(token, process.env.SECRET_KEY);
      req.activeAdmin = activeAdmin;
    } catch (e) {
      console.log("ERROR", e);
    }
  }
  next();
});

server.applyMiddleware({ app, cors: corsOptions});
const httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);

httpServer.listen(process.env.PORT || 4004, () =>
  console.log(
    `???? Server ready at http://localhost:4004${server.graphqlPath}`
  )
);

当我尝试上传图片时，出错；

Access to fetch at 'https://adminurl.herokuapp.com/graphql' from origin 'https://clienturl' has been blocked by CORS policy: 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.

我正在使用heroku，heroku出错

2020-11-08T02:51:30.233151+00:00 heroku[router]: sock=backend at=error code=H18 desc="Server Request Interrupted" method=POST path="/graphql" host=****domain**** request_id=d4db3170-15c4-41d5-81cf-83b42552d90a fwd="194.54.28.40" dyno=web.1 connect=1ms service=340ms status=503 bytes=386 protocol=https

【问题讨论】：

标签： node.js reactjs express graphql apollo-server

【解决方案1】：

试试这个而不是 server.applyMiddleware。但我不确定它是否能解决您的问题。

app.use(cors(corsOptions));

【讨论】：

【解决方案2】：

将 apollosServer cors 更改为 false

  apolloServer.applyMiddleware({ app, cors: false })

并在 app.use 中添加您的配置：

app.use(cors(corsOptions))

【讨论】：

这正是我一直在寻找的，因为如果你不这样做，永远不会使用 corsOptions。
这正是我所需要的。如果您不设置 cors:false，apollo-server-express 会覆盖 cors 标头这一事实非常令人沮丧，并且可能导致许多生产应用程序不安全
这是apolloServer.applyMiddleware({app, cors: false}) 工作。想知道为什么这不是默认模式。此设置是安全方法。

【解决方案3】：

按照简单的两个步骤进行

第 1 步 安装包cors

npm i cors

第 2 步导入为

const cors = require("cors");

从 express 创建应用后，即 "const app = express();"

粘贴以下行

  app.use(cors());

注意：如果你想配置更多，你可以删除 corsOption 对象并传递给 cors() as

const corsOptions = {
  origin: "*",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  preflightContinue: false,
  optionsSuccessStatus: 204,
};
app.use(cors(corsOption));

More Detail

解决方案 2 如果您使用 reactjs 作为客户端，请确保为运行 apollo 服务器后端的服务器设置完整的 url 路径

const httpLink = createHttpLink({
  uri: "http://localhost:5000/graphql",
});

如果你只使用 http://localhost:5000/ 会抛出 cors 错误

【讨论】：