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

Question

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

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

我的起源：http://127.0.0.1:8080

我的Apollo客户：

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
});

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

const AUTH_QUERY = gql`
  mutation TokenAuth($username: String!, $password: String!) {
    tokenAuth(username: $username, password: $password) {
      token
    }
  }
`;

我使用react-apollo-的钩子来执行查询：

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

我的架构（根据文档）：

class Mutation(graphene.ObjectType):
    token_auth = graphql_jwt.ObtainJSONWebToken.Field()
    verify_token = graphql_jwt.Verify.Field()
    refresh_token = graphql_jwt.Refresh.Field()

schema = graphene.Schema(query=Query, mutation=Mutation)

从 GraphiQL 处理此查询会给我一个有效的响应。GraphiQL 在浏览器的另一个选项卡上运行 http://127.0.0.1:8000/graphql。

查询：

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

变量：

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

响应：

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

Answer 1

于是，问题就解决了。别忘了，当你按下没有明确定义类型的按钮时，会使用“提交”类型。

<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>

当您按下提交类型按钮时，将调用render，响应将尝试将内容分派给未安装的组件。但如果您的按钮类型为“button”，则请求工作正常。我希望我的折磨能为某人节省时间。