跨域请求

/*
 * @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 axios from 'axios'

//Vue.prototype.$axios=axios

 

// 在请求axios 的时候

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

      // console.log(res.data);

    });

跨域写完后，一定要重启