0
我的目標是在React-app中對POSTQL API進行突變。這樣做雖然我做了一個錯誤：POST http://urlhere/graphiql 405（不允許的方法） 我的函數來發送數據：如何正確設置GET/POST提取的標題以避免CORS
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: "[email protected]",
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 =>{
});
}
}一些搜索，我意識到這可能會引起是缺乏後標頭，所以我改變的代碼：
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: "[email protected]",
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 =>{
});
}
}現在我有錯誤：Failed to execute 'fetch' on 'Window': Invalid name
我完全新獲取的數據，所以我完全不知道是怎麼回事。值得注意的是，當我嘗試從GET服務器獲取GET數據時，我的迴應是：No 'Access-Control-Allow-Origin' header is present on the requested resource。我將'Allow-Cors-Allow-Origin'插件下載到chrome中，但'它'似乎並不是最好的解決方案。我的作用是：
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
}以下是我在控制檯發現： https://s1.postimg.org/2e35egfbbj/Zrzut_ekranu_2017-10-18_o_21.12.33.png
---編輯---
我嘗試添加標題是這樣的：
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}不過，我有錯誤：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();