标签: fetch-api

我尝试在浏览器中通过fetch API发布松弛消息:

fetch('https://hooks.slack.com/services/xxx/xxx/xx', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-type': 'application/json'
  },
  body: JSON.stringify({text: 'Hi there'})
})
  .then(response => console.log)
  .catch(error => console.error);
};

我收到以下错误消息:

Fetch API cannot load:
https://hooks.slack.com/services/xxxxxxx/xxxxx. 
Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response.

该怎么办？

如何使用fetchapi javascript(https://github.com/github/fetch)传递查询字符串？

var url = "http://www.abcd.com";
var query = {
    a: "test",
    b: 2
};

http://www.abcd.com?a=test&b=2当我传递一些参数时,上面应该被转换成fetch

我有这个调用函数的动作:

dispatch(Api({url: "my_url", method: "POST", data: data}))

这里我将数组作为数据传递..

import fetch from 'isomorphic-fetch'

export default function Api({url, method, headers, data}={}){
    return dispatch => {

        console.log(data)
        console.log(url)
        console.log(method)
        console.log(JSON.stringify(data))
        let response = fetch(url, {
            mode: 'no-cors',
            method: method || null,
            body: data || null, 
        }).then(function(response) {
            console.log("response");
             console.log(response)
            });

    }
}

在这里,我用fetch用mode:'no-cors',我想我想过去的所有arguements ..在这里,我的身体是我作为传递简单arguement阵列..

当我看到响应时,它就像:

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

在这里我的身体没被使用..

这里有什么问题？需要帮忙

我认为同源不是CORS,反之亦然.JavaScript的Fetch API mode选项的两个选项有什么区别？

此外,在规格中,它说:

即使默认请求模式是"no-cors",也不鼓励标准将其用于新功能.这是相当不安全的.

为什么不安全？资料来源:https://fetch.spec.whatwg.org/#requests

正如你可以看到从这个Bugzilla的线程(和也),Firefox不总是在POST请求发送Origin标.RFC规定不应在某些未定义的"隐私敏感"上下文中发送它.Mozilla 在这里定义了这些上下文.

我想知道的是,这些是Firefox不会发送Origin标头的唯一情况.据我所知它也不会发送它在跨源POST请求(虽然Chrome和IE将),但我无法在文档中确认.它是否在我遗漏的地方列举？

谢谢.

我没有在Chrome调试器中看到我的Fetch AJAX数据请求？他们在哪？

我正在使用fetch从api获取数据json.工作正常,但我必须重复使用它进行各种调用,因此它需要是同步的,否则我需要一些方法来在每个组件的提取完成时更新接口.

function fetchOHLC(yUrl){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
                alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;

        return {t,o,h,l,c};

    })
    .catch(function(error) {
        console.log(error);
    });    
}

var fetchData = fetchOHLC(yUrl);
alert(fetchData); // empty ?

除了使用fetch之外,还有其他方法可以实现吗？(我不想优先使用jquery).

谢谢

编辑

问题是关于fetch-api,而不是ajax,而不是jquery,所以请不要在没有正确阅读的情况下将其标记为重复这些问题.如果您仍然觉得有必要这样做,请停止将其与十年前的问题和答案联系起来,十年后会发生很多变化.

在我的 javascript 客户端中，我使用 fetch 调用服务器来检索服务器生成的文件。我正在使用以下客户端代码：

var _url = "";    
var initParms = {  
   method: "GET",
   mode: 'cors'
}

fetch(_url, initParms)
.then(response => {
   if(response.ok){
      alert(response.headers.get("content-disposition"));
      return response.blob();
   }

   throw new Error("Network response was not OK.");
})
.then(blob => {
   var url = new URL.createObjectURL(blob);
})     

这实际上工作得很好。但是，服务器会为该文件生成一个文件名，并将其作为 content-disposition 标头的一部分包含在响应中。

我需要使用服务器生成的文件名将此文件保存到用户的机器上。在 Postman 中，我实际上可以看到响应的内容处置标头设置为：Content-Disposition: attachment;filename=myfilename.txt。

我试图从响应中读取内容配置（请参阅我的 js 代码中的警报），但我总是得到 null（即使相同的响应显示了 Postman 中的内容配置）。

难道我做错了什么？有没有办法使用 fetch 响应来检索文件名？有没有更好的方法从服务器获取文件名和文件？

PS 这是我返回文件的服务器端代码：

控制器动作

public IHttpActionResult GetFile(){
   return new FileResult("myfilename.txt","Hello World!");
}

文件结果类

public class FileResult : IHttpActionResult …

我使用以下代码通过 Fetch API 将用户位置发布到我自己的后端服务：

window.onload = () => {
    let getPosition = (options) => {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resolve, reject, options);
        });
    };

    getPosition().then(pos => {
        const data = new FormData();
        data.append('latitude', String(pos.coords.latitude));
        data.append('longitude', String(pos.coords.longitude));

        fetch('/', {             // <--- error is thrown in this line
            method: 'POST',
            body: data
        }).then(response => {
            if (!response.ok) {
                throw Error('Data sent - Network response NOT OK');
            } else {
                console.log('Data sent - Network response OK')
            }
        });
    });
};

这完美地工作，后端服务发回一个积极的空响应。 …

我最近开始使用原生的 fetch 功能（节点 17+）

我今天意识到它缺少一些功能node-fetch，例如agent

这是为什么？

有计划添加吗？

很遗憾，因为我需要添加node-fetch到我的项目中

看

• https://www.npmjs.com/package/node-fetch#custom-agent
• https://nodejs.org/api/globals.html#fetch