首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用不同的服务器端口时,Node/Express服务器CORS问题

使用不同的服务器端口时,Node/Express服务器CORS问题
EN

Stack Overflow用户
提问于 2020-12-05 15:35:32
回答 1查看 96关注 0票数 0

我有一个运行在sitename.com:3333上的node/graphql服务器,我已经创建了另一个运行在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。

请帮帮我!

客户端代码如下:

代码语言:javascript
复制
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 }) => {}
})

服务器代码:

代码语言:javascript
复制
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());
EN

回答 1

Stack Overflow用户

发布于 2020-12-05 15:59:38

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

您的服务器需要支持您正在尝试执行的特定CORS请求。如果您使用的是Express,那么如果实现得当,CORS module会为您做很多工作。CORS是为了保护你的站点,所以在浏览器上运行的其他人的网页中的Javascript不能随意使用你的API,所以在你打开CORS请求时一定要小心。

而且,由于这对您来说似乎是一个新问题,我强烈建议您阅读和学习what CORs is and how it works

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65154802

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档