vue使用axios请求相关配置文件包括跨域配置

对axios进行封装方便后续使用(request.js)

import axios from 'axios'const request = axios.create({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 debugreturn Promise.reject(error)}
)export default request

封装好的axios使用示例

load() {request.get("/user", {params: {pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}}).then(res => {console.log(res)this.tableData = res.data.recordsthis.total = res.data.total})}

vue跨域配置(vue.config.js)

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

vue使用axios请求相关配置文件包括跨域配置相关推荐

vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...
入门Nginx之-静态资源服务器及跨域配置
简介这里静态资源就以之前的一个项目文章地址为例,源码 Github,项目本身很简单,只是分别对第三方的服务端.自己的服务端发起请求. 不论是调用第三方服务端接口,还是自己的后端服务,如果跨域未在服务 ...
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署目录 process.env.NODE_ENV与@vue/cli-servic ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...
springboot+Vue项目-微博留言(前后端分离,跨域)
所用技术数据库:mysql 后台框架:springboot,mybatis plus 前台框架:Vue 实体类:lombok 异步:axios 一丶微博留言后端小贴士:约定>配置>编码 ...
css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证
css磨砂效果效果图实现方法 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
React+fetch通过修改配置文件解决跨域问题
fetch("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&am ...

vue使用axios请求相关配置文件包括跨域配置

vue使用axios请求相关配置文件包括跨域配置相关推荐

最新文章

热门文章