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

Posted 2023-03-08

【中文标题】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

【参考方案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 错误