Question

我的目标是在React-app中将突变POST到graphQL API。这样做时我遇到了一个错误： POST http://urlhere/graphiql 405（方法不允许） 我发送数据的功能：

＆＃13;

getRating = (e, id) => {
        e.preventDefault();
        let value = 2;
            const uri = '//hereIputAddress/graphiql';
    
            const query = `
            mutation{
                rating(group_id: 3, product_id: $product_id, value: $value, name: $name, phone: $phone, email: $email, content:$content) {
                product_id,
                value,
                }
            }
            `;

            const variables = {
                product_id: id,
                value: value,
                name: "wq",
                phone: "601654654",
                email: "goto@gmail.com",
                content: "some content"
            };

            const apolloFetch = createApolloFetch({ uri });
            
            apolloFetch.use(({ request, options }, next) => {
                if (!options.headers) {
                options.headers = {};
                console.log(options.headers);
                }
            
                next();
            });
            
            apolloFetch({ query, variables }).then(res =>{

            });
        }
    }

＆＃13;

经过一番搜索，我意识到可能是因为缺少标题，所以我将代码更改为：

＆＃13;

getRating = (e, id) => {
        e.preventDefault();
        let value = 2;
            const uri = '//hereIputAddress/graphiql';
    
            const query = `
            mutation{
                rating(group_id: 3, product_id: $product_id, value: $value, name: $name, phone: $phone, email: $email, content:$content) {
                product_id,
                value,
                }
            }
            `;

            const variables = {
                product_id: id,
                value: value,
                name: "wq",
                phone: "601654654",
                email: "goto@gmail.com",
                content: "some content"
            };

            const apolloFetch = createApolloFetch({ uri });
            
            apolloFetch.use(({ request, options }, next) => {
                if (!options.headers) {
                options.headers = {};
                console.log(options.headers);
                }

                options.headers['Access-Control-Allow-Credentials'] = 'true';
                options.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
                options.headers['Access-Control-Max-Age:1728000`'] = '1728000'; 
                options.headers['authorization'] = 'created token';
            
                next();
            });
            
            apolloFetch({ query, variables }).then(res =>{

            });
        }
    }

＆＃13;

现在我有错误：Failed to execute 'fetch' on 'Window': Invalid name

我对获取数据非常陌生，所以我完全不知道发生了什么。值得注意的是，当我尝试从该服务器使用GET获取数据时，我得到了响应：No 'Access-Control-Allow-Origin' header is present on the requested resource。我修好了＃39;将Allow-Cors-Allow-Origin插件下载到chrome，但它似乎不是最好的解决方案。我的职责是：

＆＃13;

const url = 'http://188.116.11.87/graphql?query=%23%20Welcome%20to%20GraphiQL%0A%23%0A%23%20GraphiQL%20is%20an%20in-browser%20IDE%20for%20writing%2C%20validating%2C%20and%0A%23%20testing%20GraphQL%20queries.%0A%23%0A%23%20Type%20queries%20into%20this%20side%20of%20the%20screen%2C%20and%20you%20will%0A%23%20see%20intelligent%20typeaheads%20aware%20of%20the%20current%20GraphQL%20type%20schema%20and%0A%23%20live%20syntax%20and%20validation%20errors%20highlighted%20within%20the%20text.%0A%23%0A%23%20To%20bring%20up%20the%20auto-complete%20at%20any%20point%2C%20just%20press%20Ctrl-Space.%0A%23%0A%23%20Press%20the%20run%20button%20above%2C%20or%20Cmd-Enter%20to%20execute%20the%20query%2C%20and%20the%20result%0A%23%20will%20appear%20in%20the%20pane%20to%20the%20right.%0A%0A%0Aquery%7B%0A%20%20product%7B%0A%20%20%20%20id%0A%20%20%20%20name%0A%20%20%20%20description%0A%20%20%20%20keywords%0A%20%20%20%20is_published%0A%20%20%20%20author%0A%20%20%20%20attributes%20%7B%0A%20%20%20%20%20%20id%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20basket%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%20%20post%20%7B%0A%20%20%20%20id%0A%20%20%20%20publication_date%0A%20%20%7D%0A%20%23%20last_comments(data%3A%226%22)%0A%20%20%0A%7D%0A%0A'
    return fetch(url).then(function(response){
    console.log(response);
      return response.json();
    }).then((data) =>{//doing stuff with data here
}

＆＃13;

以下是我在控制台中发现的内容： https://s1.postimg.org/2e35egfbbj/Zrzut_ekranu_2017-10-18_o_21.12.33.png

---编辑---
我尝试用这种方式添加标题：

＆＃13;

const headers = new Headers()
    headers.append('Access-Control-Allow-Origin', 'http://localhost:3000')
    headers.append('Access-Control-Allow-Credentials', 'true')
    headers.append('Content-Type','application/json');
    //headers.append('Content-Type','text/plain;charset=UTF-8');

    const url = 'http://myurl/graphql?
    const fetchInit = {
      method: 'GET',
      headers: headers,
      mode: 'cors',
      cache: 'default'
    }


    return fetch(url, fetchInit)
    .then(function(response){
      return response.json();
    }).then((data) => {...stuff here}

＆＃13;

但是我有错误：Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是，如果我将no-cors模式添加到fetchInit，我会在包含Unexpected end of input

的行中收到错误return response.json();

Answer 1

尝试在服务器端设置cors选项和Access-Control-Allow-Origin标头。

tweets_df = pd.DataFrame()

tweets_df['lang'] = map(lambda tweet: tweet['lang'], tweets_data)

tweets_by_lang = tweets_df['lang'].value_counts()

fig, ax = plt.subplots()
ax.tick_params(axis='x', labelsize=15)
ax.tick_params(axis='y', labelsize=10)
ax.set_xlabel('Languages', fontsize=15)
ax.set_ylabel('Number of tweets' , fontsize=15)
ax.set_title('Top 5 languages', fontsize=15, fontweight='bold')
tweets_by_lang[:5].plot(ax=ax, kind='bar', color='red')

这可能对您有所帮助

Answer 2

当您在服务器上执行此操作时，您正在请求中设置标头。使用npm中的cors包来设置cors响应选项。

如何正确设置GET / POST提取标头以避免CORS

2 个答案: