Question

我正在尝试关注有关django and graphql

的文档

https://www.techiediaries.com/django-graphql-tutorial/graphene/

我距离我们可以使用graphql视图进行测试的一半方向并进行查询。

然后我停下来尝试做一些前端工作来用ajax进行查询

一直在阅读

https://blog.graph.cool/how-to-use-graphql-with-jquery-51786f0a59cb

即使在该博客中，它也在使用post。我认为使用get不应该有太大的不同。

所以我尝试将query变成一个字符串然后JSON.stringify将它们传递给后端django，但我一直在收到错误

这是我的错误

XMLHttpRequest cannot load localhost:8000/graphql/?{"query":"query { allProducts {id sku title description } }"}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这是html + jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button class="graphql-test">CLICK</button>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $('.graphql-test').on('click', function(e){
                e.preventDefault();


                var query = "query { allProducts {id sku title description } }";

                $.ajax({
                    method: 'get',
                    url: 'localhost:8000/graphql/',
                    data: JSON.stringify({"query": query}),
                    contentType: 'application/json',
                    success: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log(data);
                    }

                })
            })
        });
    </script>
</html>

Answer 1

您似乎需要更改ajax调用以包含完整的网址。

更改

url: 'localhost:8000/graphql/'

要

url: 'http://localhost:8000/graphql/'

如何使用get方法将ajax与graphql一起使用？

1 个答案: