Vue2 跨域 axios二次封装 localstorage封装

最新推荐文章于 2025-06-05 09:20:49 发布

这代码写的

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/D3S3P/article/details/130047059

文章详细介绍了在Vue2项目中处理跨域问题的方法，包括设置.env文件以区分不同环境，修改vue.config.js配置代理，以及axios的二次封装，添加请求和响应拦截器。同时，还展示了如何封装localstorage以便在全局使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2 跨域

在src同级创建 :

.env.production 内容为:

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://127.0.0.1:8080'

.env.development 内容为:

# 开发环境配置
ENV = 'development'
 
#设置端口号
port=8080
 
# 前端请求路径
VUE_APP_BASE_API = '/api'
 
# #后端服务器地址不要忘记添加http或https
# BASE_URL_REAR='http://127.0.0.1:8080/'

.env.test 内容为:

ENV = 'test'
NODE_ENV='test'

vue.config.js 内容为:

module.exports = {
    devServer: {
        // 默认值 为localhost 127.0.0.1
        // 端口默认为8080
        // host: "localhost",
        // port: "8080",
        // 默认有的
        proxy: {
            "/api": { // 配置你要让那些路径要跨域
                // 你可以让该路径前面添加api
                // login
                // 是后台路径
                target: "后台服务器地址", // 38

                // true 代表跨域
                changOrigin: true,
                pathRewrite: { //忽略api ,将api变成空格
                    "^/api": ""
                }
            }
        }
    }
}

axios二次封装

在src目录下创建 utils 目录在里面创建 request.js 文件内容为:

import axios from "axios";
import qs from 'qs'
import storage from "@/utils/storage"//后期引入localstorage的封装使用

const newAxios = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 10000,
    // headers:请求头
})
// 添加请求拦截器
newAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    let token = storage.get("sell_token")//将路由存进本地存储中
    if (token) {
        config.headers.Authorization = token
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
newAxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;//将返回的数据过滤留下我们需要的data
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
// 全封装
// 路径 方法 需要传输的数据
function request(url, method = "get", shuju = {}) {
    return newAxios({
        url,
        method,
        data: method == "post" ? qs.stringify(shuju) : '',
        params: method == "get" ? shuju : ''
    })
}
//全封装
function post(url, shuju) {
    return request(url, "post", shuju)
}
function get(url, shuju) {
    return request(url, "get", shuju)
}
export default {
    post, get//暴露
}

localstorage封装

在 utils 目录下创建 storage.js 文件内容为:

const storage = window.localStorage
export default {
    set(key, value) { storage.setItem(key, JSON.stringify(value)) },//设置
    get(key) { return JSON.parse(storage.getItem(key)) },//获取
    isKey(key) { return storage.getItem(key) ? true : false },//判断
    clear() { storage.clear() },//清空
    remove(key) { storage.removeItem(key) },//清除一个
}

挂载到全局 main.js中

import storage from './utils/storage'

Vue.prototype.$storage = storage