Axios配置跨域、封装get/post请求方法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

技术背景

• 什么是跨域？
  • 跨域，全称是跨域资源共享（Cross-Origin Resources Sharing ,CORS）,是浏览器的保护机制。
  • 只允许浏览器请求同一域名下的服务，同一域名的要求是协议、域名、 端口都要保持一致，只要有一项不同，都是跨域请求
  • 简单来说，在baidu网站不能请求taobao服务器的资源，一个域到另一个域发送请求，这就造成了跨域的资源共享的问题，这个问题就是cors
• 解决方法：配置后端、配置前端、配置服务器
• 配置前端
• 在前端开发环境中配置代理，中转请求，因为跨域是浏览器的保护机制，如果脱离了浏览器发送请求。
• 那么就不会收到浏览器跨域保护机制的影响，这样可以使用中转服务器来发送请求和接收响应。
• 前端只需要请求这个中转服务器，并且保持和中转服务器URL保持一致就可以了。
• 此时在Axios请求上直接配置跨域，便捷快速

技术简介

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装Axios

 npm install axios

Vue引入Axios配置与请求方法封装

import axios from "axios";
// 超时时间是5秒
axios.defaults.timeout = 5000;
// 允许跨域
axios.defaults.withCredentials = true;
// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
// 基础url
// axios.defaults.baseURL = 后台接口地址;
axios.defaults.baseURL = 线上生产环境地址;

/**
 * 封装get方法
 */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, { params: params })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * 封装post方法
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, data)
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

请求后台接口写法

import { get, post } from "./http";
//带参
export const 自定义接口名 = params => get(`后台接口名`, params);
export const 自定义接口名= id => get(`后台接口名?id=${id}`);
// encodeURIComponent可把字符串作为 URI 组件进行Base64编码，使中文在url传输成功
export const 自定义接口名 = 字符串变量名 => get(`后台接口名/` + encodeURIComponent(字符串变量名));
//无参数写法
export const 自定义接口名 = () => get(`后台接口名`);