Vue fetch 本地跨域调试接口

最新推荐文章于 2024-08-16 17:33:03 发布

张长长

最新推荐文章于 2024-08-16 17:33:03 发布

阅读量1.2k

点赞数 2

分类专栏：前端Vue 文章标签： Vue 接口调试跨域接口

本文链接：https://blog.csdn.net/weixin_38010398/article/details/95219846

版权

本文介绍了在Vue项目中如何利用fetch进行本地跨域接口调试，包括参照文章封装fetch方法，配置config里的proxy实现跨域，以及在main.js全局引入和具体使用方法。

摘要由CSDN通过智能技术生成

根据https://www.jianshu.com/p/489a627d4ba3？a=1&b=1，封装fetch方法。

//前置拼接url
let api = '/mock';//这里的api等于你在config.js定义的跨域设置

// //处理promise和fetch的兼容性以及引入
// require('es6-promise').polyfill();
// require('isomorphic-fetch');

//处理get请求，传入参数对象拼接
let formatUrl = obj => {
  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
  return params.substring(0, params.length - 1);
};

let Fetch = (url, option = {}) => {
  option.headers = option.headers || {};

  option.headers['token'] = `${window.localStorage.getItem('token')}`;
  const m = (option.method || '').toLocaleLowerCase();
  // get query format
  if (m == 'get') {
    if (option.