解决vue+webpack项目接口跨域出现的问题


Posted in Javascript onAugust 10, 2020

1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)

proxyTable: {
 '/api': {
  target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境
  // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口
  changeOrigin: true,
  pathRewrite: {
   '^/api': '/'
  }
 }
},
host: '自己的IP或者默认的localhost', // can be overwritten by process.env.HOST

在使用axios请求的时候把所有接口的'http://10.xx.xx.xx:8080/renter-server'部分替换为'/api'

例如我们项目里axios的配置文件夹(自定义的)api下面的index.js文件里有如下配置

let env = process.env.NODE_ENV
let BASE_1, BASE_2
if (env === 'production') {// 生产环境 正式打包使用
 BASE_1 = BASE_2 = CONFIG.apiHost
} else if (env === 'development') {// 开发环境 本地测试使用
 BASE_1 = BASE_2 = '/api'
}

再用BASE1拼接进行请求

axios.get(BASE_1 + '/pc/getHouseList', {params: params})

补充知识:vue打包后404,webpack配置问题

首先声明这是基于vue2.x的

1.

解决vue+webpack项目接口跨域出现的问题

将其中build的配置项assetsPublicPath进行修改,改为上图--》目的是将资源文件的引入路径,改为相对地址(相对index.html)

2.html中的js、css、img引入均没有问题,

但是css中的background-image还是报404

此时的问题原因是,使用了相对地址后,在css进行引入的图片路径,其相对的是css文件的路径

此时的修改方法是,修改build文件夹中的utils.js文件,增加一行代码搞定

解决vue+webpack项目接口跨域出现的问题

以上这篇解决vue+webpack项目接口跨域出现的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python中安装django模块的方法
2020/03/12 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
个人培训自我鉴定
2014/03/28 职场文书
师德师风个人反思
2014/04/28 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技