axios的封装及跨域代理

目录

一、axios的封装

1.在src中创建utils文件，其下在创建request文件，其中的内容为

2.再创建一个HTTP文件，内容为

3.再创建一个api文件，内容为

4.然后直接在页面中写上

二、跨域代理

1.原理：协议，端口，域名 有一项不同就会产生跨域

注意事项：

---

一、axios的封装

1.在src中创建utils文件，其下在创建request文件，其中的内容为

（设置跨域后，直接在baseUrl写入写好的路径名）

import axios from "axios"
const http = axios.create({
        baseURL: '/api',
        timeout: 6000,
    })
    //请求拦截
http.interceptors.request.use(config => {
        return config
    }, err => {
        console.log(err);
    })
    //相应拦截
http.interceptors.response.use(res => {
    return res.data.data
}, err => {
    throw new Error(err)
})
export default http

---

2.再创建一个HTTP文件，内容为

import http from "./request"

export default function request({ url, method = 'get', data: {}, params: {} }) {
    return http({
        url,
        method,
        data,
        params
    })
}

3.再创建一个api文件，内容为

import request from '../utils/request'

export const addHome = () => request({ url: 'home/shejishi' })

4.然后直接在页面中写上

import { addHome } from "./api.js" 
export default {
    data() {
        return {};
    },
    created() {
        addHome().then(res=>{
            console.log(res);
        })
    },
    methods: {},
    components:{}
};

二、跨域代理

1.原理：协议，端口，域名 有一项不同就会产生跨域

在根目录下创建一个vue.config.js文件，内容为

//修改默认配置,配置跨域
module.exports = {
    devServer: { //开发环境的服务器配置
        port: 9090, // 1.1端口号 默认的可以不配
        open: true, // 1.2运行项目自启
        proxy: { //代理转发
            "/api": {
                // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api
                // 1 目标路径 这里相当于公共的地址
                target: "http://m.sirfang.com/api",
                //2 允许跨域
                changOrigin: true,
                //3 重写路径
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

注意事项：

 1 文件名称不能更改

 2 配置完成后需要重新启动项目