使用fetch跨域

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

项目中第三方接口,一般为跨域需求,又不一定有nginx代理,所以想到使用fetch
先看MDN中这段,讲的很清楚:

请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

  • 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的ok属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
  • 默认情况下,fetch不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置credentials选项)。自从2017年8月25日后,默认的credentials政策变更为same-originFirefox也在61.0b13中改变默认值

所以封装一下,主要是要将credentials设置为omit

async function ajax (url, {headers, body, method = 'GET', ...otherParams} = {}) {  
  if (!headers) {  
    headers = new Headers({  
      'Content-Type': 'application/json'  
  });  
  }  
  let data = body;  
  if (typeof data === 'object') {  
    data = JSON.stringify(data);  
  }  
  let response = await fetch(url, {headers, data, method, credentials: 'omit', ...otherParams});  
  if (response.ok) {  
    return response.json();  
  }  
  return response.statusText;  
}  
  
async function post (url, data, config = {}) {  
  return ajax(url, {method: 'post', body: data, ...config});  
}  
  
async function get (url, data, config = {}) {  
  return ajax(url, {method: 'get', body: data, ...config});  
}  
  
  //使用
(async function () {  
  const url = 'http://XX/http/rest';  
  let result = await post(url, {});
  console.log(result);  
})();
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看