Vue项目搭建常用的配置文件,request.js和vue.config.js_interceptors.request.use 没有config-程序员宅基地

技术标签: 前端  vue.js  javascript  

1. 前端跨域解决方案

request.js用来请求数据,封装的代码如下:

import axios from 'axios'

const request = axios.create({
    
	baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
    
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
    
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
    
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
    
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

vue.config.js:

// 跨域配置
module.exports = {
    
    devServer: {
                    //记住,别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {
                     //设置代理,必须填
            '/api': {
                  //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
                target: 'http://localhost:9999',     //代理的目标地址
                changeOrigin: true,              //是否设置同源,输入是的
                pathRewrite: {
                       //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

2. 后端跨域解决方案

如果后端设置了跨域配置,则使用下面的request.js 代码:

import axios from 'axios'

const request = axios.create({
    
	baseURL: 'http://localhost:9090',  // 注意!! 这里是全局统一加上了 后端接口前缀 前缀,后端必须进行跨域配置!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
    
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
    
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
    
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
    
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xqnode/article/details/118325868

智能推荐

中断异常的分析思路_sensor采集中断-程序员宅基地

文章浏览阅读517次。工作学习中经常遇到中断相关的issue,我一般会从 中断源 (ic)-- 驱动层 -- SDK 逐层分析。往往解决的比较快。举一个例子,下面给出分析过程。问题描述: 开机过程中指纹driver有大量异常中断触发log 问题分析: 首先,我们要确定的是,这些异常中断是怎么来的。有以下三种case。 1.软件误报2.cpu主动发出的信号3.指纹sensor发出的信号 针对软件误报,只需要 cat ..._sensor采集中断

斧子的HTML5输出是什么,CF斧有什么使用技巧 斧子使用经验分享【详解】-程序员宅基地

文章浏览阅读82次。很多人知道斧子很牛,但就是用不好,所以好多人练了一段时间就放弃了,其实斧子练习有一些问题是需要注意的,下面就结合一下我个人练习斧子的经验,和大家分享一下,希望能对大家的练习提供一些帮助。1.拿起斧子要有信心和决心因为斧子有无视头盔的特点,所以面对其他武器,不应该有任何畏惧的心理(当然不能傻傻的向前冲然后白白送死),就像阿卡选手一样,要有一击毙命的信心和决心,因为在刀战战场上,心态很重要。有一个好的...

nginx配合fastdfs使用-----python上传测试_fastdfs python 上传-程序员宅基地

文章浏览阅读176次。开始前需要先准备好fdfs的环境https://blog.csdn.net/weixin_44834666/article/details/105686059一、安装py3Fdfs包pip install py3Fdfs二、编辑py文件from fdfs_client.client import Fdfs_client, get_tracker_conf# 创建客户端 client...._fastdfs python 上传

plsql创建用户,创建表空间以及删除用户,删除表空间_plsql删除创建的用户-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏5次。1.创建表空间create tablespace [表空间名:例如{newszgcp}]datafile [表空间所在地址:例如{'D:/StudySoft/OrServer/admin/orcl/newszgcp'}]size [表空间大小:100M ]autoextend on next [扩展:50M ] maxsize unlimited; 2.创建用户create..._plsql删除创建的用户

Java SE GUI编程_p.add(new textfield(10))含义-程序员宅基地

文章浏览阅读169次。GUI编程_p.add(new textfield(10))含义

Codeforces 1119B 贪心二分_codeforces - 1119b-程序员宅基地

文章浏览阅读191次。https://codeforces.com/contest/1119/problem/B不改变原数组的值,复制一份,要求1-k连续,则1-mid区间内判断子数组从大到小排序后,每两个相差不大,比较均匀 i+=2倒着的目的是前大后小 能装前一定能装后 尽量装更多的 累积高度和跳着累积高度和,如果<=h 可增加更多的瓶子,否则高度太多瓶子太多,减小瓶子数量const int maxn..._codeforces - 1119b

随便推点

用matlab画三相桥式,matlab三相桥式电路仿真.doc-程序员宅基地

文章浏览阅读572次。matlab三相桥式电路仿真.doc 五邑大学 电 力电子技术 课程 设计报告 题 目: 三相桥式整流电路的 MATLAB 仿真 院 系 信息工程学院 专 业 自动化 班 级 140705 学 号 3114001891 学生姓名 杨煜基 指导教师 张建民 电力电子技术课程设计报告 2 三相桥式整流电路的MATLAB 仿真 一、 题目的要求和意义 整流电路是电力电子电路中出现最早的一种,它的作用是将..._三相全桥电路怎么在matlad画出

vscode浏览器怎么打开php,vscode怎么选择浏览器-程序员宅基地

文章浏览阅读2.4k次。vscode怎么选择浏览器?vscode如何右键选择浏览器运行html文件?我们利用Vscode软件编写html的时候,一般都想右键选择html文件,然后直接选择浏览器运行,但是默认是没有的。相关文章教程推荐:vscode教程下面小编给大家分享一下如何设置。首先我们新建一个html文件,你可以用记事本编写一个,如下图所示接着将html文件导入到VsCode软件中,如下图所示我们直接在html文件中..._vscode运行php代码用特定浏览器

phpexcel导出大量数据合并单元格_【PHP】通过PHPExcel导出比较复杂的表格-程序员宅基地

文章浏览阅读591次。[PHP] 纯文本查看 复制代码/*** excel文件导出** [url=home.php?mod=space&uid=952169]@Param[/url] array $data 需要生成excel文件的数组* $data = [* [NULL, 2010, 2011, 2012],//列名* ..._phpexcel 导出复杂表格

马哥运维学习作业(九)-程序员宅基地

文章浏览阅读110次。1、详细描述一次加密通讯的过程,结合图示最佳。2、描述创建私有CA的过程,以及为客户端发来的证书请求进行办法证书。以下操作使用的2台服务器完成:服务器主机名IPCA服务器ca192.168.2.30httpd服务器httpd192.168.2.80在CA服务器上操作:创建所需要的文件[root@ca~]#cd/etc/pki/CA/#..._主进程负责生成n个子进程

iOS AFNetworking上传图片到服务器_afnetworking multipartfile-程序员宅基地

文章浏览阅读828次。AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManagermanager]; manager.requestSerializer = [AFHTTPRequestSerializerserializer]; manager.responseSerializer = [AFHTTP_afnetworking multipartfile

一个C语言程序是由( d)构成,自考“C语言程序设计”模拟试题八-程序员宅基地

文章浏览阅读562次。自考“C语言程序设计”模拟试题八一、选择题1.一个C语言程序是由( )构成。A.语句 B.行号 C.数据 D.函数2.下面标识符中正确的是( )。A.a#bc B.123ABC C.sime D.Y·M·D3.在C语言中,存储一个整型、字符型、双精度实型变量所需的字节数..._6*4/7 +7%3

推荐文章

热门文章

相关标签