标签: fetch-api

我正在使用fetch polyfill和'no-cors'模式并获得响应状态0.在开发人员工具中,我可以看到响应具有所请求的数据.

客户端代码:

const BASE_CONFIG = {
    credentials: 'include',
    mode: 'no-cors'
};

let checkStatus = (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response;
    } else {
        var error = new Error(response.statusText);
        error.response = response;
        throw error;
    }
};

function GET(url, urlParams={}, config={}) {
    let requestConfig = {
        method: 'get'
    };
  
    Object.assign(requestConfig, BASE_CONFIG, config);
    return fetch(url, requestConfig)
            .then(checkStatus)
            .then(parseJSON);
}

GET('http://other.domain,{})

Beckend nodejs(Express.js)简化的响应处理程序:

function getData(req, res) {
    var responseData = {data: 'test'};
    res.header("Access-Control-Allow-Origin", "*"); …

我正在尝试使用fetch和ES6 promises智能地处理来自API的成功/错误响应.

以下是我需要处理响应状态的方法:

204: has no json response, but need to treat as success
406: should redirect to sign in
422: has json for error message
< 400 (but not 204): success, will have json
>= 400 (but not 422): error, will not have json

所以,我正在努力学习如何干净利落地写这个.

我现在有一些不太常用的代码,看起来像这样:

fetch()
  .then(response => checkStatus(response))
  .then(parseJSON)                           //will throw for the 204
  .then(data => notify('success', someMsg))
  .catch(error => checkErrorStatus(error))
  .then(parseJSON)
  .then(data => notify('error', dataForMsg)
  .catch(error => notify('error', someGenericErrorMsg)

但是使用catch两次似乎很奇怪,我还不知道如何处理204.

另外,只是澄清checkStatus并checkErrorStatus做类似的事情:

export …

我正在尝试获取fetch API请求的重定向响应位置片段.但如果可能的话,我无法想象如何访问它.

上下文是我在隐式流中执行OpenID Connect请求,用于WebRTC Identity Proxy断言生成.OIDC规范将请求的答案定义为:

使用Implicit Flow时,所有响应参数都将添加到重定向URI的片段组件中

HTTP/1.1 302找到位置:https ://client.example.org/cb# access_token = SlAV32hkKG ...

所以我在手动模式下设置了获取请求.但响应是一个不透明的重定向过滤响应,它隐藏了位置标题.(https://fetch.spec.whatwg.org/#concept-filtered-response-opaque-redirect)

其他获取模式是错误,其后无效.虽然XHR会自动跟随重定向,但也无济于事.我可能会从fetch API中遗漏一些东西,但它似乎是故意隐藏的东西.

有人能给我一种方法来访问这些信息(或确认这是不可能的)？

是否有替代fetch和XHR来发出此请求,这将允许访问重定向位置标头？

我正在使用fetch并将whatwg-fetchpolyfill包含在我的应用程序中.

我也TextDecoder按照Jake Archibald的博客中描述的那样使用了!解码响应,但我不确定使用什么polyfill.

(目前Safari抱怨ReferenceError: Can't find variable: TextDecoder)

我猜有一个polyfill TextDecoder,但我找不到它......

我正在尝试向API发送GET请求,但是当我在代码中添加自定义标头时,会发生奇怪的事情.某处,请求方法在到达Web服务器时更改为OPTIONS.

但是当我在没有标题的情况下执行相同操作时,它将是GET类型.当我使用应用程序postman(API开发工具)时,请求工作正常!

请求代码:

    let token = this.generateClientToken(privateKey, message);

    let myheaders = {
      "appID": appID,
      "authorizationkey": token
    }

    fetch('http://localhost:8080/api/app/postman', {
      method: "GET",
      // body: JSON.stringify(''),
      headers: myheaders
    }).then(function(response) {
      console.log(response.status);     //=> number 100–599
      console.log(response.statusText); //=> String
      console.log(response.headers);    //=> Headers
      console.log(response.url);        //=> String

      return response.text()
    }, function(error) {
      console.log(error.message); //=> String
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

服务器日志输出(带标头):

worker_1  | 172.18.0.4 -  17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403
web_1     | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel …

我有一个反向代理服务器,它根据主机头重定向到不同的服务.但是,使用浏览器向此服务器发出请求时,Host始终将其设置为URL中的域名.我试过了:

fetch("http://foo.com", {"headers":{"Host":"bar.foo.com"}})

但它不起作用

我有点难过.我忘记了怎么做.我有一个名为ext.get()的函数,它接受url的参数.它从网址获取响应.ext.get()函数用于将响应作为json返回.我不认为这样做.

ext.get = (url) => {
        let myHeaders = new Headers();

        let options = {
            method: 'GET',
            headers: myHeaders,
            mode: 'cors'
        };

        //fetch get

        fetch(url, options).then(response => {
            console.log(JSON.stringify(response.json()))
            return JSON.stringify(response.json())

        });

    };

当我向某个端点发送删除请求时,例如使用来自终端的httpie

http delete http://localhost:8181/admin/applications/uspecs

我得到了一个有效的行为,就像在{ success: true }响应体中一样.但是,当我这样做

fetch (
  'http://localhost:8181/admin/applications/uspecs',
  { method: 'DELETE' }
)
.then(res => doSomethingWithResponse())
.catch(err => console.error(err))

在javascript代码中,然后我得到了一个

Fetch API cannot load http://localhost:8181/admin/applications/uspecs.
Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

控制台上的错误.我错过了什么？我在选项请求上获得了有效的方法列表.

我使用Fetch API来获取URL的内容.对于我的内部开发,我试图连接到开发服务器,我收到一个错误.

此服务器的证书无效.您可能连接到假装为"xxx.com"的服务器,这可能会使您的机密信息面临风险.

如何为内部用途禁用SSL /证书检查？或者我有一个xxx.crt文件,如何安装或传递它以获得成功响应.

function createRequest(method) {
     const init = {
         method,
         headers: new Headers({.....}),
     };

    return new Request(url, init); }

我在上面的代码（https://davidwalsh.name/fetch）中使用Request标头（带有Fetch ）

但是，在使用Jest编写单元测试用例时，它给了我这个错误：ReferenceError：Headers未定义

我是否需要模拟这些标准模块？如何在单元测试用例中导入标题