通过CORS对GraphQL请求的无效响应以及通过GraphiQL处理JWT身份验证的有效响应

问题是我总是在没有任何有效负载的情况下收到400响应代码。 甚至有些地方出了问题，graphql传递代码为200，有效负载传递错误块。GraphiQl工作正常这一事实告诉我设置和模式是正确的。所以我卡住了。也许，有什么想法，去哪里找

我不认为它失败是因为cors本身。我的应用程序在以下情况下运行良好。我决定尝试新技术，并使用GQL覆盖应用程序

我的出身：

这是我的阿波罗客户：

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: "http://127.0.0.1:8000/graphql/",
  credentials: "include", // cookies enabled
  headers: {
    "X-Csrftoken": getTokenCsrf(),  
    "Content-Type": "application/json"
  },
  fetchOptions: {
    mode: "cors"
  }
});

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

这是我的请求（VAR的值通过状态来自表单）：

我使用react apollo hook执行查询：

const [sendCreds, loading, error] = useMutation(AUTH_QUERY);
const handleSubmit = e => {
    sendCreds({
      variables: { username: state.username, password: state.password }
    });
};

我的模式（根据）：

从GraphiQL处理这个查询会给我一个有效的响应。 GraphiQL在浏览器的另一个选项卡上运行

查询：

mutation TokenAuth($username: String!, $password: String!) {
  tokenAuth(username: $username, password: $password) {
    token
  }}

变量：

   {"username": "qwerty", "password": "qwerty"}

答复：

{
  "data": {
    "tokenAuth": {
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6InF3ZXJ0eSIsImV4cCI6MTU2NjMwMTkwNiwib3JpZ0lhdCI6MTU2NjMwMTYwNn0.NzgecEfFcnsrudcgrlZyBCC1rutoVJFciUI-ugFq9Fg"
    }}}

---

于是，问题就解决了。不要忘记，当您按下按钮时，如果没有明确定义类型，则使用类型“submit”

<form >
  <div className="input-field">
    <input type="text" id="username" />
    <input type="password" id="password" />        
    <button
      type="button"  // that string solved my problem.
      onClick={handleSubmit}
    >
      {msg}
    </button>      
  </div>
</form>

{msg}

当您按下SubmitTyped按钮时，将调用render，response将尝试将内容分派到已卸载的组件。但若你们的按钮有“button”类型，请求就可以了。我希望我的折磨能为某人节省时间

{
  "data": {
    "tokenAuth": {
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6InF3ZXJ0eSIsImV4cCI6MTU2NjMwMTkwNiwib3JpZ0lhdCI6MTU2NjMwMTYwNn0.NzgecEfFcnsrudcgrlZyBCC1rutoVJFciUI-ugFq9Fg"
    }}}

<form >
  <div className="input-field">
    <input type="text" id="username" />
    <input type="password" id="password" />        
    <button
      type="button"  // that string solved my problem.
      onClick={handleSubmit}
    >
      {msg}
    </button>      
  </div>
</form>