cors 错误：没有“Access-Control-Allow-Origin”标头 apollo-server-express

Question

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

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

图像上传到 s3。

注 2：localhost 也可以正常工作，没有错误。

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

我在 url 上尝试了 cors 选项的 origin，但它仍然没有用。

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

Answer 1

将 apollosServer cors 更改为 false

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

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

app.use(cors(corsOptions))