2017-05-09 79 views
2

我在了解Fetch API以及我如何使用它。但是,当我使用有效的json向this page发出请求时,响应返回null。我在codepen.io上提出这个请求,所以我知道这与CORS有关。提取API请求仅返回空

const headers = new Headers(); 
const params = { 
    method: 'GET', 
    headers : headers, 
    mode : 'no-cors' 
} 

const request = new Request('http://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en'); 

fetch(request, params).then(function(response){ 
    return response; 
}).then(function(json){ 
    console.dir(json.body); 
}); 

在开发工具的请求,返回此:

Response 
body : null 
bodyUsed : false 
headers :Headers 
ok:false 
redirected : false 
status : 0 
statusText : "" 
type: "opaque" 
url :"" 

从MDN:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

所以我不知道为什么没有响应体加入到我的请求和我需要更改/添加以获取请求的JSON的内容?

+2

因为您正在使用no-cors模式。这就是它的作用:允许进行请求,但不能得到回应。 – Kaiido

+0

当我将'method'改为'cors'时,我在控制台中得到了这个。 'Fetch API无法加载http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。请求的资源上没有“Access-Control-Allow-Origin”标题。因此Origin'http://s.codepen.io'是不允许访问的。如果一个不透明的响应满足您的需求,请将请求的模式设置为'no-cors'以获取禁用CORS的资源。' – jkjmr6

+2

您的主要问题是/将是CORS - 该API似乎不允许CORS,因此您可以'在你的页面中“借用”他们的资源 - 你需要一个服务器端方法来代表你的页面访问这个API –

回答

0

下面是对使用no-cors的问题的参考。目前看来这不适用于全局窗口对象。通过邮递员它工作正常。

no-cors with fetch