标签: fetch-api

我正在尝试使用fetch POST一个JSON对象.

根据我的理解,我需要将一个字符串化的对象附加到请求的主体,例如:

fetch("/echo/json/",
{
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })

当使用jsfiddle的json echo时,我希望看到我发送的对象({a: 1, b: 2}),但这不会发生 - chrome devtools甚至不会将JSON显示为请求的一部分,这意味着它没有被发送.

我正在尝试从HP Alm的REST API中获取一些数据.它适用于小卷曲脚本 - 我得到了我的数据.

现在使用JavaScript,fetch和ES6(或多或少)似乎是一个更大的问题.我一直收到此错误消息:

无法加载Fetch API.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://127.0.0.1:3000 "访问.响应具有HTTP状态代码501.如果不透明响应满足您的需要,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

我知道这是因为我试图从我的localhost中获取该数据,解决方案应该使用CORS.现在我以为我确实这样做了,但不管怎么说它要么忽略我在标题中写的内容,要么问题是别的什么？

那么,是否存在实施问题？我做错了吗？遗憾的是我无法检查服务器日志.我真的有点卡在这里.

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

我正在使用Chrome.我也尝试使用Chrome CORS插件,但后来我收到另一条错误消息:

当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此,不允许来源" http://127.0.0.1:3000 "访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

我正在尝试使用新的Fetch API但是遇到了Cookie问题.具体来说,在成功登录后,将来的请求中会有一个Cookie标头,但是Fetch似乎忽略了这些标头,而我使用Fetch发出的所有请求都是未经授权的.

是因为Fetch还没有准备好,或者Fetch不能与Cookies一起使用？

我用Webpack构建我的应用程序.我也在React Native中使用Fetch,它没有相同的问题.

有一个用于从JavaScript发出请求的新API:fetch().是否有任何内置机制可以在飞行中取消这些请求？

我尝试fetch了旧网站的网址,发生了错误:

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

我理解了该消息,并尝试执行返回不透明响应的请求:

fetch("http://xyz", {'mode': 'no-cors'})

好吧,它现在有效...但我无法阅读它.= \

那么,不透明的反应的目的是什么？

我仍然试图绕过它.

我可以让用户通过文件输入选择文件(甚至多个):

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

我可以submit使用这个事件<fill in your event handler here>.但是一旦我这样做,我该如何使用该文件发送fetch？

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

我知道fetch正在使用promises,它们都允许你向服务器发出AJAX请求.我已经读过fetch有一些额外的功能,这些功能在XMLHttpRequest(以及fetch polyfill中,因为它基于XHR)中不可用.fetch API有哪些额外功能？

当我使用react-native init(RN版本0.29.1)创建一个全新的项目并将渲染方法中的提取放到公共Facebook演示电影API时,它会抛出一个Network Request Failed.有一个非常无用的堆栈跟踪,我无法在chrome控制台中调试网络请求.这是我发送的提取:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

JavaScript网络调用(例如fetch或XMLHttpRequest)或任何其他类型的HTTP网络请求在HTTP状态代码为0时失败是什么意思？

这似乎不是有效的HTTP状态代码,因为其他代码在HTTP规范中是三位数.

我尝试完全拔掉网络作为测试.它可能是不相关的,但导致状态代码17003(IIRC),粗略搜索建议意味着"DNS服务器查找失败".

相同的代码可以在某些位置和系统中正常工作,但在某些环境中,它会因状态代码0而失败,并且没有提供responseText.

这是Internet URL的典型HTTP POST.它不涉及file://我理解可能会返回0表示在Firefox中成功.

我正在尝试使用fetchReact Native从Product Hunt API中获取信息.我已经获得了正确的访问令牌并将其保存到状态,但似乎无法在GTP请求的授权标头内传递它.

这是我到目前为止所拥有的:

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => …