javascript - 如何配置使用 createServer 创建的服务器以在已创建时填充 cors？

Question

我有这个代码:

var gqlServer =require('./server.js')

var server=gqlServer()
var port = process.env.PORT||5000

server.listen({port:port}, ()=>
  console.log(`🚀 Server ready at http://localhost:${port}`)
)

和server.js是:

var cors=require('cors')
const http=require('http')
const express = require('express')
const {ApolloServer,gql,PubSub} = require('apollo-server-express')
var firebase =require('firebase/app')
require('firebase/database')

// const pubsub=new PubSub()

const app = express()
var whiteList=['https://totorotos.firebaseapp.com',
'https://totorotos.web.app','http://localhost:8080']
app.use(cors({origin:whiteList}))
const httpServer=http.createServer(app)
var io = new require('socket.io')(httpServer,{
  origins:whiteList
})

const firebaseConfig = {
    apiKey: "*********",
    authDomain: "******",
    databaseURL: "********",
    projectId: "********i",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********",
    measurementId: "********"
  }

firebase.initializeApp(firebaseConfig)
var database = firebase.database()

const typeDefs = gql`
  type Query {
    hello: String,
    getEmails:[String!]
    getPosts(email:String): [GetPosts]
  }
  type Mutation{
    postMessage(message:String,email:String!,
      name:String,photo:String,date:String!): Boolean
  }
  type GetPosts{
    email:String!
    name:String
    date:String!
    photo:String
    message:String
  }
`

const resolvers = {
  Query: {
    hello: () => 'Hello roger!',
    getEmails:async()=>{
      const result=[]
      await database.ref('posts/').orderByChild('email')
      .once('value', function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var childKey = childSnapshot.key
          var childData = childSnapshot.val()
          result.push(childData.email)
        })
      })
      const res2= [...new Set(result)]
      return res2
    },
    getPosts:async(_,args)=>{
      const result=[]
      await database.ref('posts/').orderByChild('email').equalTo(args.email)
      .once('value', function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var childKey = childSnapshot.key
          var childData = childSnapshot.val()
          result.push(childData)
        })
      })
      return result
    }
  },
  Mutation:{
    postMessage:async(_,args)=>
    {      
      await database.ref('posts/').push({
        message: args.message,
        email:args.email,
        name:args.name,
        photo:args.photo,
        date:args.date
      })
      io.emit('updated', {email:args.email})
    //   pubsub.publish('POST_ADDED',{name:'paquito',
    // comment:'como estas tronco?'});
      return true
    }
  },
  // Subscription: {
  //   postAdded: {
  //     subscribe: () => pubsub.asyncIterator(['POST_ADDED']),
  //     resolve: payload => {
  //       return payload
  //     }
  //   }
  // }
}

function gqlServer() {
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    // Enable graphiql gui
    introspection: true,
    playground: true
  })

//   var whiteList=['https://totorotos.firebaseapp.com',
// 'https://totorotos.web.app']
  // server.applyMiddleware({app, path: '/', cors: {origin:whiteList,credentials:true}})
server.applyMiddleware({app,path:'/',cors:false})

  // server.installSubscriptionHandlers(httpServer)
  return httpServer
}

module.exports = gqlServer

这工作得很好。也就是说，当 localhost:8080 尝试连接到 localhost:5000 时，此方法有效。当我使用以下命令发布 firebase 云函数时，问题就出现了:

const functions = require('firebase-functions')
const express=require('express')
const cors=require('cors')({ origin: true })
const admin = require('firebase-admin')
const gqlServer=require('./server/index')

admin.initializeApp();
var server=gqlServer()
exports.api1=functions.https.onRequest(server)

server/index 与之前相同 (server.js)。这样，当我尝试从 totorotos.web.app 连接到 url 云函数时，出现错误(cors 问题)。当它已经创建时，如何配置server来完成cors？任何意义上的帮助将不胜感激。谢谢。

Answer 1

为了使用普通的nodejs http服务器(没有使用Express框架)启用CORS，没有中间件架构可以设置所需的 header ，然后继续路由到其他请求处理程序，因此您必须在实际请求中执行此操作处理程序。

仅供引用，中间件架构是 Express 框架的主要优点之一，它允许您在一个地方设置 COR 策略，供许多请求处理程序使用。

无论如何，这就是普通的 Nodejs http 服务器传入请求的样子。

// add new listener to the http server for requests
server.on('request', (req, res) => {
    // check if this is the path we are interested in
    // if there could be query parameters, then you have to parse them off first
    if (req.url === "/somePath") {
        // If desired, set these more specifically such as only specific origins
        // or CORS only allowed on specific methods
        const headers = {
            'Access-Control-Allow-Origin': '*',     
            'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
            // add other headers as needed
        };

        // if pre-flight request, handle it here
        if (req.method === 'OPTIONS') {
            res.writeHead(204, headers);
            res.end();
            return;
        } else if (req.method === "GET") {
            res.writeHead(200, headers);
            // handle rest of the GET request here
            // ...
            res.end();
        } else {
            res.writeHead(405);
            res.end();
        }
    }
});

这是一篇关于一般主题的文章:Enable CORS in nodejs http server without Express .

处理 OPTIONS 请求是很多人不理解或不知道放入的东西。对于 CORS，这称为“飞行前”请求，在某些情况下，浏览器会使用 OPTIONS 请求作为权限检查，以查看服务器在实际发送真实请求之前是否允许该请求。如果浏览器选择这样做，则预检请求还必须具有适当的 CORS header ，因为浏览器将通过此方式决定是否允许该请求。

有多种情况会导致浏览器发出预检请求。简而言之，它是 CORS 规范未定义为“简单”的任何请求。您可以阅读更多相关信息 here 。使请求变得不简单的因素有:除了几个选定的 header 之外的自定义 header 、除 GET、HEAD 或 POST 之外的任何动词、请求中除 application/x-www-form-urlencoded 之外的 Content-Type header 、multipart/form-data 或 text/plain 等等...

如果您需要通过跨源请求发送凭据(例如 Cookie)，则还有更多限制，您可以阅读 here .