您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

跨域请求

/*
 * @Description: 配置文件
 */
module.exports = {
  publicPath: "./",
  devServer: {
    open: true,
    proxy: "http://106.15.179.105/api"  //跨域路径
  },
};
// proxy是代理的意思
// 代理跨域就是在欺骗浏览器 让浏览器认为你访问的还是 同源的localhost:8080 ,但是用代理把地址代理到了需要跨域的地址去了

// 首先第一步把vue.config.js放在项目的根目录下
// 然后重启项目
// 在这里代理的关键字是/api,也就是在之后请求的时候 在路径前拼接/api
// 如果用http 必须要把baseurl删除

 

http.js 放在src根目录下

import Axios from "axios";

var baseURL=('http://106.15.179.105/api');

// module.exports = {

//     publicPath: "./",

//     devServer: {

//       open: true,

//       proxy: "http://106.15.179.105/api"

//     },

//   };

 

const instance = Axios.create({

  baseURL,

  //请求的基本路径

  timeout: 5000,

  //超时时间  超过这个时间就不再执行

});

//创建axios实例

 

// 封装http方法,如果请求成功就把请求到的数据return 如果响应失败就执行失败的catch函数

// data是post的传参  params是get的传参

export default function http(url, method, data = {}, params = {}) {

  return instance({

    url: url,

    method: method,

    data: data,

    params: params,

  })

    .then((res) => {

      // console.log(res);

      if (res.status >= 200 && res.status < 300) {

        return res;

      } else {

        return Promise.reject(res.data.meta.msg);

        //如果状态码不是200-300的之后就走失败的回调

      }

    })

    .catch((err) => {

      return Promise.reject(err);

    });

}

 

// http.js就是封装的一个 axios请求的方法 后期还要添加一个请求拦截 一个响应拦截

 

// http.js 是封装的一个axios方法 比着直接用axios的好处是:可以设置baseurl和timeout

 

// 怎么使用:

// 注意 使用http同样要下载axios

// 在main.js写上

// import http from "./http/http.js";

// Vue.prototype.$http = http;

// 在请求axios 的时候

 // this.$axios({ url: "/resources/carousel", method: "post" }).then((res) => {

      // console.log(res.data);

    });

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进