我想从我的graphql API返回数据,我有两个前端,其中一个是工作,但在另一个前端,它不工作当我在这个端口运行第一个前端时,它工作,但第二个不工作,它说被cors策略阻止Hare是我的后端代码
*从“cors”导入cors;app.use(cors({ origin:“http://localhost:3000”,credentials:true,}));
我也试过了,但是不管用
app.use(cors())
qvtsj1bj1#
我不认为是服务器端的问题,请按照这段代码从您的appoloclient它的工作e
import { ApolloClient, HttpLink, ApolloLink, InMemoryCache, concat, split,} from "@apollo/client"import AsyncStorage from "@react-native-async-storage/async-storage"import { WebSocketLink } from "@apollo/client/link/ws"import { SubscriptionClient } from "subscriptions-transport-ws"import { getMainDefinition } from "@apollo/client/utilities"let token: string | null = nullconst getToken = async () => { return new Promise(async (resolve) => { try { let value = await AsyncStorage.getItem("token") console.log("token", value) console.log("Done.") token = value resolve(value) } catch (e) { // read error } })}const URL = "a2db-130-193-219-4.ngrok.io"const httpLink = new HttpLink({ uri: https://${URL}/graphql,})const wsLink = new WebSocketLink({ uri: wss://${URL}/graphql, options: { reconnect: true, },})getToken()const authMiddleware = new ApolloLink((operation, forward) => { // add the authorization to the headers operation.setContext({ headers: { authorization: ${token || ""}, "Content-Type": "application/json", }, }) return forward(operation)})const splitLink = split( ({ query }) => { const definition = getMainDefinition(query) return ( definition.kind === "OperationDefinition" && definition.operation === "subscription" ) }, wsLink, httpLink)const client = new ApolloClient({ cache: new InMemoryCache(), link: concat(authMiddleware, splitLink),})export default client
import {
ApolloClient,
HttpLink,
ApolloLink,
InMemoryCache,
concat,
split,
} from "@apollo/client"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { WebSocketLink } from "@apollo/client/link/ws"
import { SubscriptionClient } from "subscriptions-transport-ws"
import { getMainDefinition } from "@apollo/client/utilities"
let token: string | null = null
const getToken = async () => {
return new Promise(async (resolve) => {
try {
let value = await AsyncStorage.getItem("token")
console.log("token", value)
console.log("Done.")
token = value
resolve(value)
} catch (e) {
// read error
}
})
const URL = "a2db-130-193-219-4.ngrok.io"
const httpLink = new HttpLink({
uri: https://${URL}/graphql,
const wsLink = new WebSocketLink({
uri: wss://${URL}/graphql,
options: {
reconnect: true,
},
getToken()
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
operation.setContext({
headers: {
authorization: ${token || ""},
"Content-Type": "application/json",
return forward(operation)
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query)
return (
definition.kind === "OperationDefinition" &&
definition.operation === "subscription"
)
wsLink,
httpLink
const client = new ApolloClient({
cache: new InMemoryCache(),
link: concat(authMiddleware, splitLink),
export default client
字符串
cuxqih212#
您需要添加第二个前端作为允许的来源,例如,如果第二个前端是从http://localhost:3001提供的,请执行以下操作:
cors({ origin: ["http://localhost:3000", "http://localhost:3001"], credentials: true})
cors({
origin: ["http://localhost:3000", "http://localhost:3001"],
credentials: true
字符串如果你想允许所有的原点,你可以设置origin: true。在这里查看所有允许的origin选项:https://www.npmjs.com/package/cors#configuration-options
origin: true
2条答案
按热度按时间qvtsj1bj1#
我不认为是服务器端的问题,请按照这段代码从您的appoloclient它的工作e
字符串
cuxqih212#
您需要添加第二个前端作为允许的来源,例如,如果第二个前端是从http://localhost:3001提供的,请执行以下操作:
字符串
如果你想允许所有的原点,你可以设置
origin: true
。在这里查看所有允许的origin选项:
https://www.npmjs.com/package/cors#configuration-options