Node/Express 服务器 CORS 问题与不同的服务器端口

Question

我有一个 node/graphql 服务器在 sitename.com:3333 上运行 我创建了另一台服务器，在 sitename.com:3334 上运行

我可以从 sitename.com 和 subdomain.sitename.com 向位于 sitename.com:3333 的服务器发出请求

但是如果我尝试从 subdomain.sitename.com 连接到 sitename.com:3334（只是一个不同的端口），它会给我一个 cors 错误：

跨域请求被阻止：同源策略不允许读取位于https://sitename.com:3334/graphql 的远程资源。 （原因：CORS 请求没有成功）

我已经在防火墙中打开了端口，并在服务器和客户端上设置了 ssl。

请帮忙！

客户端代码如下：

import { ApolloClient } from 'apollo-client'
import { withClientState } from 'apollo-link-state'
import { HttpLink } from 'apollo-link-http'
import { Agent } from 'https'
import fs from 'fs'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import { onError } from 'apollo-link-error'
import { ApolloLink } from 'apollo-link'
import decode from 'jwt-decode'
import history from '../history'
import Cookies from 'universal-cookie'
import {
APP,
AUTH,
CLIENT_AUTH_REQUEST_TYPE,
CLIENT_AUTHENTICATION_METHOD,
JWT,
VERSION
} from '../environment'
import https from 'https'
import { defaults, resolvers } from '../api'
import { createUploadLink } from 'apollo-upload-client'

const { CONSTANTS: { UNAUTHORIZED, FORBIDDEN } = {} } = APP
const cookies = new Cookies()

const opts = {
credentials: 'same-origin',
headers: {
'frontend-version': VERSION,
[AUTH.STRATEGIES.CLIENT.AUTH_HEADER]: CLIENT_AUTH_REQUEST_TYPE
}
}

const useLocalStorage = CLIENT_AUTHENTICATION_METHOD.LOCAL_STORAGE
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0

// const apolloCache = new InMemoryCache();

const apolloCache = new InMemoryCache({
// dataIdFromObject: e => `${e.__typename}_${e.id}` || null // eslint- 
disable-line no-underscore-dangle
})

// const watchedMutationLink = new WatchedMutationLink(apolloCache, 
watchedMutations);
const stateLink = withClientState({
cache: apolloCache,
defaults,
resolvers
})

const uploadLink = createUploadLink({
// uri: 'http://localhost:3333/graphql',
uri: 'https://demo.MYSITE.in:3334/graphql',

fetchOptions: {
agent: new https.Agent()
}
})

const httpLink = new HttpLink({
uri: 'https://demo.MYSITE.in:3334/graphql',

...opts
})

const TOKEN_NAME = 'x-connector-token'

const authLink = new ApolloLink((operation, forward) => {
operation.setContext(({ headers = {} }) => {
const token = cookies.get('token')

if (token) {
  headers = { ...headers, 'x-connector-token': token }
}

return { headers }
})

return forward(operation)
})

const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors && graphQLErrors.filter(e => e).length > 0) {
graphQLErrors.map(({ message = '', status = 200 }) => {
  if (UNAUTHORIZED === message || status === 401) {
    if (
      history &&
      history.location &&
      history.location.pathname !== '/login'
    ) {
      history.push('/login')
    }
  }
  if (FORBIDDEN === message || status === 403) {
    history.push(`/error-page/403`)
  }
  return null
})
}
if (networkError && networkError.statusCode === 401) {
// eslint-disable-next-line
history.push('/login')
}
if (networkError && networkError.statusCode === 403) {
// Do something
}
if (networkError && networkError.statusCode === 400) {
// Do something
}
if (networkError && networkError.statusCode >= 500) {
// eslint-disable-next-line

history.push(`/error-page/${networkError.statusCode}`)
}
})

let links = [errorLink, stateLink, httpLink]

links = [
errorLink,
stateLink,
// afterwareLink,
// authMiddlewareLink,
authLink,
// watchedMutationLink,
// httpLink,
uploadLink
]

const link = ApolloLink.from(links)


export default new ApolloClient({
link,
cache: apolloCache,
connectToDevTools: true,
// opts: {
//   agent
// },
fetchOptions: {
agent: new https.Agent()
// rejectUnauthorized: false
},
defaultOptions: {
query: {
  errorPolicy: 'all'
}
},

onError: ({ networkError, graphQLErrors }) => {}
})

服务器代码：

const app = express();

// tried this too
const corsOptions = {
origin: 'https://demo.MYSITE.in',
}
// also tried app.use(cors)
app.use(cors({
'allowedHeaders': ['Content-Type'],
'origin': '*',
'preflightContinue': true
}));

app.use(helmet());
// app.use(cors());

Answer 1

浏览器不会向与网页本身的来源不同的来源（不同的端口构成不同的来源）的服务器发出请求，除非您在服务器上专门为该新来源启用该请求。这是一个花园品种 CORs 问题，其中有数百万关于如何处理的帖子和文章。由于您在问题中未显示任何代码，因此我们无法建议对您的代码进行特定的代码修复。

您的服务器需要支持您尝试执行的特定 CORS 请求。如果您使用的是 Express，那么 CORS module 会在正确实施的情况下为您完成很多工作。 CORS 可以保护您的网站，因此从浏览器运行的其他人网页中的 Javascript 不能任意使用您的 API，因此请谨慎对待您向 CORS 请求开放的内容。

而且，由于这对您来说似乎是一个新问题，我强烈建议您阅读并了解what CORs is and how it works。

另外，请注意，有“简单”CORS 请求和“预飞行请求”（非简单请求），需要做更多工作才能启用预飞行请求。浏览器根据请求的确切参数来决定给定的跨源请求是简单的还是需要预检，而您的服务器必须做更多的事情来启用预检请求。