vue+element 学习之路（六）proxyTable设置跨域，axios和qs封装请求体

最新推荐文章于 2024-07-23 16:20:57 发布
最新推荐文章于 2024-07-23 16:20:57 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39327044/article/details/89603202
版权
本文介绍了在Vue+Element项目中如何使用proxyTable进行跨域配置，免去请求URL中携带完整后端地址的冗余。同时，文章分享了如何封装axios并结合qs库处理请求体，方便传递复杂参数到后端。
摘要由CSDN通过智能技术生成

proxyTable:
就拿我自己正在练手的项目来说，我需要用到前后端分离，前端在VSCODE上开发，端口为8081
在这里插入图片描述
后端选择Ecplise,springboot 端口为8080

在这里插入图片描述
所以如果每次前端发送请求都带上http://localhost:8080的话显得十分冗余。proxyTable就很好的帮我们实现了代理。

配置方法：
首先找到cofig文件夹下的index.js配置文件，改写proxyTable方法，设置自己后端的域名（或其他域名）

补充：被遮挡的部分：assetsPublicPath:’/’

在这里插入图片描述

用法：

在这里插入图片描述

后端接口：

在这里插入图片描述
还

最低0.47元/天 解锁文章
倔强的啊强
关注
vue 封装 axios
爱睡的虫虫
11-17 871
安装 只用安装一个axios就可以了。 npm install axios –save 接口代理设置 //文件位置：config/index.js proxyTable: { '/api': { target: 'http://47.95.xxx.246:8080', // 通过本地服务器将你的请求转发到这个地址 changeOrigin: true...
axios的封装
lelena_123的博客
09-24 170
在vue项目中对axios进行封装 1. 引入axios，qs模块 import axios from 'axios'; import Qs from "qs"; import store from "./store"; 2、配置环境 if (process.env.NODE_ENV == 'development') { //开发环境 axios.defaults.baseURL = "/v1"; } else if (process.env.NODE_ENV == 'debug'
axios请求大全
最新发布
Cloud的专栏
07-23 1450
本文讲解axios封装方式以及针对各种后台接口的请求方式axios的介绍和基础配置可以看这个文档: 起步 | Axios中文文档 | Axios中文网axios封装的重点有三个，一是设置全局config,比如请求的基础路径，超时时间等，第二点是在每次请求前往请求头里面塞token,第三点是处理请求的response,如果出错了进行统一的错误处理 发送GET请求 我们先来看swagger文档,这个请求是get请求，传递的参数是query,也就是跟在url后面的键值对，类似于?key1=val1&key2
axios 封装、proxyTable代理设置
守鹤
06-06 2115
axios 封装 设置代理 打包时，设置不同的接口地址 其他 1.axios封装 //HttpService.js import axios from 'axios'; import qs from 'qs'; import * as common from './common'; let API_HOST = '/dev'; if (process.env.HOST ===...
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
vue中对axios进行基础封装
GaryCheung的博客
12-23 2449
先给出目录结构 在对axios进行封装前，引入了qs包对data进行处理，因为axios默认post请求时content-type为application/json，而后台需要接收的数据格式为application/x-www-form-urlencoded，这个具体是否修改看你们后台接收数据的方式。 在http.js文件中代码如下 import axios from 'axios' // qs...
vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
热门推荐
JCat的博客
09-03 10万+
vue项目的前期配置 封装axios实例 封装API
vue axios请求封装 以及跨域设置
tttddd888的博客
05-31 1037
src目录下新建utils文件夹 标题utils>新建request.js文件 // 得先安装axios npm i --save axios import axios from "axios"; import { Message, } from 'element-ui' // 引入消息提示 axios.defaults.headers.post['Content-Type'] = 'application/json';//设置post的默认请求类型，有的可能是fromdata格式，需要单独
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8836
未完
vue3项目之axios封装以及vue.config.js 代理proxy配置
sinat_38628334的博客
12-09 5754
前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于vue-cli3创建的项目不会自动生成vue.config.js文件，需要手动创建在根目录下进行相关配置。 准备： 前端地址：http://10.13.123.123:8888 后端接口地址示例：http://10.13.456.456:9999/test/login/doLogin 封装axios： //src>request>http.js //main.ts引用：import http from "
Vue项目中如何使用Axios封装http请求详解
12-13
前言 使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。 下载源码 安装 npm install axios --save 建立http.js文件 在/src/utils/目录下建立一个htttp.js 1.首先导入axios和router。 import axios from 'axios'; import router from '../router'; 2.接着设置axios请求参数。 axios.defaults.timeout = 5000; //请
vue接口的封装
weixin_45869811的博客
11-15 446
local.js文件第二步建立request.js文件在request.js引入。第三步在src下一级建立api文件夹。建立local.js文件。
vue之qs使用&ajax请求封装&Object.keys
xj2wjtx的博客
12-09 206
qs安装和使用安装使用ajax请求封装Object.keys 安装和使用 安装 npm install qs 使用 import Qs from 'qs' Qs.parse();//将url解析成对象形式 Qs.stringify();//将对象序列化成url形式，以&进行拼接 ajax请求封装 const Ajax = async ({ url, type, data, ContentType='form', msg = '获取信息失败!' }) => { let c = nu
RJS参考之JavaScriptElementProxy
hideto
05-29 88
JavaScriptElementProxy是真实DOM对象的proxy，可以代理任何对DOM对象的JavaScript方法调用 还有一些加强的非JavaScript方法可以调用: [code] replace_html(*options_for_render) [/code] Replaces the innerHTML of the DOM object. See the Jav...
vue+elementUI+proxy 上传文件
dizzydwarf的博客
10-24 2609
vue+elementUI+proxy 上传文件 步骤 el-upload中设置 :http-request = newrequest 重新定义上传方式为newrequest methods中写newrequest (param){} file = param.file 获取要上传的文件 let submitform = new FormData() submitform.append(“file”, file) , 添加file 设置config 中 header为multipart/form-data
VUE + axios POST处理封装
weixin_38834647的博客
10-21 4315
安装依赖 安装axios asiox npm npm i axios 安装qs qs npm npm i qs 封装 utils/request.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseURL = '/apis' //请求地址的域名（此处使用了代理所以直接填／a...
【VUE+element后台】傻瓜式的接口解决跨域，配置代理
weixin_45943340的博客
02-17 295
傻瓜式解决跨域
【VUE】一个简单常用的proxyTable配置
LONGLONGAGO_RU的博客
04-29 1万+
// 配置改动后需要重启生效 （运行npm run dev） proxyTable: { // 所有 /api请求的路由会走这个代理 '/api': { changeOrigin: true, //跨域 target: 'http://172.16.0.107:1338' }, // 所有 /ywapi请求的路由会走这个代理 '/ywapi': { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值