vue跨域和拦截器的配置
最近项目中需要使用vue框架。虽然vue在前端开发人员里也不算是什么新鲜的事儿了。只要是搞前端的都会一些vue的操作。我也不多说,直接进入正题。(这儿我以vue2.x为例)
安装什么的,我就不在这儿说了。你能找到小冰的博客,说明你对前端也有一些了解了。当然,我安装是在“菜鸟教程”里的叔进行安装的。
vue跨域的配置
安装好的vue目录结构大概是长这样子的。如下图所示:
关于跨域的配置,我把代码贴上
//这串代码是在根目录下的 config/index.js 文件中写的//当然,有些成品框架是直接是根目录下的 vue.config.js 文件,其实都是一样的意思proxyTable: {'/api':{target:`192.168.XX.XX`, //请求后台接口,如果有端口号,也需要带上端口号changeOrigin:true, // 允许跨域pathRewrite:{'^/api' : '' // 重写请求}},},
同时,在还需要修改根目录下的 .env.development (开发环境) 和 .env.staging (默认测试环竟)以及 .env.production (线上环竟 这三个文件,线上环境在开发的时候可以先不考滤,等项目完成后再来配也是可以的。
# 开发环境 .env.development
ENV = 'development'
VUE_APP_BASE_API = '/api' #api是你的接口,对应上面config/index.js 里面的那个api (下同,不再做讲述)
# 默认测试环境 .env.staging
ENV = 'staging'
VUE_APP_BASE_API = '/api'
# 生产默认配置(或者叫线上环竟) .env.production
ENV = 'production'
#VUE_APP_BASE_API = '/api'
在这配置好后,是需要重启服务的。(注意,任何修改这个文件,都需要重启服务才会生效)。其实,到这儿,跨域的问题已基本上解决了。但为了提交开发效率,我们一般还需要在配一个叫做“拦截器”的东西。
拦截器的配置
所谓拦截器,其实就是对于前端发起的请求,都会先经过拦截器,在拦截器里面,我们可以自由的添加诸如Token的东西。而对于后端返回的数据,我们也可以拦截器里面加于过滤。
//在src目录下,新建一个utils的目录,在该目录下,新建一个http.js的文件
//src/utils/http.js
import axios from 'axios'
const request = axios.create({timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {//console.log(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 => {//其实,在这儿,我们可以对后端返回的数据做处理//比如说返回的状态码加于过滤什么的,都可以在这儿做处理。//说白了 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
到这儿,拦截器就配置完成了。接下为,我们就要为我们的项目对接后端的接口了。一般是这样弄的。(当然,这也一个不约定的约定,大家都怎么来,所以我也就这样来)
//在src目录下,新建一个 api的文件夹,用于存放后端给的接口地址
//在该api文件夹下,我们针对所实现功能的不同而给不用的文件名字
//比如说,goods.js 是用于管理商品的
//那么,我们就新建一个goods.js的文件
import request from '@/utils/http';
import qs from 'qs'export function getGoods(data){return request({//这儿注意一下,我这儿前有一个api,其实我这个api是刚才前面在配置跨域时所写的api的名字//可能有些后端开发人员会这样子写接品地址: 192.168.236.123/api/goods/getGoods//那么,我在这儿,url也必须这样子写上 /api/api/goods/getGoods//前面的域名在这儿就不需要写了,已经在刚配置跨域的时候已经写上了//所以这儿需要注意一下url:'/api/goods/getGoods', //这个是后端的接口地址method:'get',params:data})
}
之后,在页面中,就能直接引用了
<!--goods.vue-->
<script>
import { getGoods } from '@/api/goods'
method:{getGoodsFun(){getGoods({id:5}).then(res=>{console.log(res)}).catch(err=>{console.error(err)})}
}
</script>
关于跨域和拦截器的介绍,大概就是么些,详细的,我晚上再做补充。
vue跨域和拦截器的配置相关推荐
- SSH允许跨域访问拦截器配置
1. 添加拦截器类AjaxFilter import java.io.IOException; import javax.servlet.Filter; import javax.servlet.Fi ...
- gateway请求拦截_gateway 网关(转发,跨域,拦截器等)
1,所需依赖 org.springframework.cloud spring-cloud-starter-gateway 2,配置路径映射 spring: cloud: gateway: disco ...
- vue如何配置服务器端跨域_vue项目里如何配置本地代理实现跨域请求
1.在如图项目配置的index.js文件夹下添加以下一段话 微信图片_20180912182204.png proxyTable: { '/rest': { target: 'http://192.1 ...
- Vue跨域配置proxyTable问题
最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题. been blocked by CORS policy: No 'Access-Control-Allow-Orig ...
- springboot + vue 后台token生成 拦截器 redis实现 前台封装axios xueX 接口实现
后台 后台程序图片 新建token的基础类 public class Constants {public final static String TOKEN = "token";} ...
- vue跨域解决的几种方案
vue跨域解决的几种方案 一.开发环境解决跨域方法 平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行 ...
- vue 什么是渐进式 响应式 意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是 轻量的 模型视图视图模型 框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
- 前后端分离开发之Vue跨域
前后端分离开发必须解决的就是跨域问题了,在这里记录一下关于在前端vue跨域的方法,以供参考 使用npm命令下载axios npm install axios 新建vue.config.js文件 目标转 ...
- VUE跨域问题的解决(没有config目录)
在网上搜索跨域问题的解决,都是需要在config目录下修改index.js,但是我创建的项目没有config目录.参考大佬的文章,得以解决 https://www.cnblogs.com/michea ...
最新文章
- SqlServer表死锁的解决方法
- python之常见报错整理
- SQLServer2008-镜像数据库实施手册(双机)SQL-Server2014同样适用
- HDU2067(卡特兰数)
- 人脸识别研究任务及开源项目调研
- echarts 柱状图圆柱_Echarts 柱状图配置详解
- Android 设置 横屏 竖屏
- win11正式版iso镜像如何安装 windows11正式版iso镜像安装方法
- Python笔记:Python中的main函数
- bzoj 2257: [Jsoi2009]瓶子和燃料(裴蜀定理)
- Asp.Net中OnClientClick与OnClick
- 免费培训后包就业,还月薪上万,深扒BI数据工程师培训套路
- python100以内的质数_100以内质数表
- 八卦掌桩功-定式八桩及相关资料
- 谈谈产品与运营之 - 润物细无声
- 勿忘2022,迎接2023
- Pwnginx – a nginx backdoor offering shell
- buctoj-2022寒假集训2
- 新版骗分导论 - 第7 版
- 【20221220】Windows通过网线共享网络及小猫咪局域网共享