Reactjs 被CORS老板打败（GraphQLServer、Graphql瑜伽、React）

CORS策略已阻止从源“”访问“”处的XMLHttpRequest:请求的资源上不存在“访问控制允许源”标头

我似乎无法摆脱这个问题，尝试了不同的“修复”CORS

这适用于使用GraphQL DB和GraphQLserver的预订服务，从GraphQL yoga到服务器以及React前端。到目前为止，效果很好。但现在我需要调用另一个api，以查看付款是否有效以及处理实际付款。但是我从上面得到了错误信息

我不确定是否需要在后端和前端启用CORS，我似乎无法独自解决这个问题。这是我当前的设置：

后端 Server.js

import { GraphQLServer, PubSub } from "graphql-yoga";
import { resolvers, fragmentReplacements } from "./resolvers/index";
import prisma from "./prisma";
const express = require("express");
const path = require("path");

const pubsub = new PubSub();

const server = new GraphQLServer({
  typeDefs: "./src/schema.graphql",
  resolvers,
  context(request) {
    return {
      pubsub,
      prisma,
      request
    };
  },
  fragmentReplacements
});

if (process.env.NODE_ENV === "production") {
  // Set static folder
  server.express.use(express.static("client/build/"));

  server.express.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../client/build/index.html"));
  });
}

export { server as default };

index.js

import "@babel/polyfill/noConflict";
import server from "./server";
import job from "../cronJobs/sendLockCode";
import sameDayJob from "../cronJobs/sendLockCodeSameDay";

job.start();

sameDayJob.start();

server.start(
  {
    port: process.env.PORT || 4000,
    cors: {
      credentials: true,
      origin: [process.env.FRONTEND_URL]
    }
  },
  () => {
    console.log("The server is up!");
  }
);

前端

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { AuthProvider } from "./contexts/AuthContext";
import { ApolloLink, InMemoryCache, HttpLink } from "apollo-boost";
import { ApolloClient } from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { split } from "apollo-link";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import { hmac, timestamp } from "./components/utility/tokenGeneration";
// import { token } from "./components/utility/payment";
import axios from "axios";

const header = { Authorization: "Svea " + hmac, Timestamp: timestamp };

const corsOptions = {
  origin: "http://localhost:3000",
  credentials: true
};

var HOST;

if (window.location.origin !== "http://localhost:3000") {
  HOST = window.location.origin.replace(/^http/, "ws");
} else {
  HOST = "ws://localhost:4000";
}

const httpLink = new HttpLink({
  uri: "/"
});

const wsLink = new WebSocketLink({
  uri: HOST,

  options: {
    reconnect: true,
    connectionParams: {
      authToken: localStorage.getItem("Jaktiatoken")
    }
  }
});

const authLink = new ApolloLink((operation, forward) => {
  // Retrive the authorization token from local storage.
  const token = localStorage.getItem("Jaktiatoken");

  // Use the set Context method to set the HTTP headers.
  operation.setContext({
    headers: {
      authorization: token ? `Bearer ${token}` : ""
    }
  });

  // Call the next link in the middleware chain.
  return forward(operation);
});

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === "OperationDefinition" && operation === "subscription";
  },
  wsLink,
  authLink.concat(httpLink)
);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

axios
  .get(`https://checkoutapistage.svea.com/api/orders/142691`, header)
  .then(res => console.log(res))
  .catch(err => console.log(err));

ReactDOM.render(
  <BrowserRouter>
    <AuthProvider>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </AuthProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

export { client };

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/context/AuthContext”导入{AuthProvider}”；
从“apollo boost”导入{ApolloLink，InMemoryCache，HttpLink}；
从“apollo客户端”导入{apollo客户端}；
从“react apollo”导入{ApolloProvider}；
从“阿波罗链接”导入{split}；
从“阿波罗链接ws”导入{WebSocketLink}；
从“apollo实用程序”导入{getMainDefinition}；
从“/components/utility/tokenGeneration”导入{hmac，timestamp}”；
//从“/components/utility/payment”导入{token}”；
从“axios”导入axios；
const header={Authorization:“Svea”+hmac，Timestamp:Timestamp}；
常数常数={
来源：“http://localhost:3000",
凭据：正确
};
变种宿主；
如果（window.location.origin！==”http://localhost:3000") {
HOST=window.location.origin.replace（/^http/，“ws”）；
}否则{
HOST=“ws://localhost:4000”；
}
const httpLink=新的httpLink({
uri:“/”
});
const wsLink=新的WebSocketLink({
uri:主机，
选项：{
对,，
连接参数：{
authToken:localStorage.getItem（“Jaktiatoken”）
}
}
});
const authLink=新链接（（操作，转发）=>{
//从本地存储中检索授权令牌。
const token=localStorage.getItem（“Jaktiatoken”）；
//使用set-Context方法设置HTTP头。
操作.setContext({
标题：{
授权：令牌？`Bearer${token}`:“”
}
});
//调用中间件链中的下一个链接。
返回向前（操作）；
});
常量链接=拆分(
（{query}）=>{
const{kind，operation}=getMainDefinition（查询）；
返回种类==“操作定义”&&operation==“订阅”；
},
wsLink，
authLink.concat（httpLink）
);
const客户端=新客户端({
链接
缓存：新的InMemoryCache（）
});
axios
.得到(`https://checkoutapistage.svea.com/api/orders/142691`，页眉）
.then（res=>console.log（res））
.catch（err=>console.log（err））；
ReactDOM.render(
,
document.getElementById（“根”）
);
导出{client}；

是的，如果事情看起来奇怪和混乱，它们可能是，这是我的第一个主要项目，我几乎是自己做的

---

/提前干杯，Sebastian

CORS是后端的一个设置，您必须允许具有*（全部）来源的CORS。要小心，因为这可能很危险，所以只让请求来自一个来源是一个好的做法。如果您使用的是chrome，您也可以尝试：看起来SveaCheckout API不允许来自其他来源的请求。要绕过此问题，您可以在自己的后端中创建一个端点来请求外部API端点。CORS策略不适用于非浏览器环境。在后端发出请求也是有意义的，因为您不想在前端公开您的机密API密钥。@hbentlov是的，我认为您是对的，因为我尝试了其他API，我可以毫无问题地与他们联系。我不知道怎么做，你知道我在哪里可以找到更多关于如何做的信息吗？还有，当我从前端打电话时，如何访问后端？我建议查看文档，了解如何设置自己的。基本上，您希望创建路由，然后使用HTTP客户端（如）请求附加了密钥的第三方API，并在路由中返回响应。CORS是后端上的一种设置，您必须允许源代码为*（全部）的CORS。要小心，因为这可能很危险，所以只让请求来自一个来源是一个好的做法。如果您使用的是chrome，您也可以尝试：看起来SveaCheckout API不允许来自其他来源的请求。要绕过此问题，您可以在自己的后端中创建一个端点来请求外部API端点。CORS策略不适用于非浏览器环境。在后端发出请求也是有意义的，因为您不想在前端公开您的机密API密钥。@hbentlov是的，我认为您是对的，因为我尝试了其他API，我可以毫无问题地与他们联系。我不知道怎么做，你知道我在哪里可以找到更多关于如何做的信息吗？还有，当我从前端打电话时，如何访问后端？我建议查看文档，了解如何设置自己的。基本上，您希望创建路由，然后使用HTTP客户端（如）请求附加了密钥的第三方API，并在路由中返回响应。