解决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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
jquery实现心算练习代码
Dec 06 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
js实现坦克大战游戏
Feb 24 Javascript
简单了解JavaScript弹窗实现代码
May 07 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php生成图片验证码-附五种验证码
2015/08/19 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JS分页效果示例
2013/10/11 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
详解angular element()方法使用
2017/04/08 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python列表list排列组合操作示例
2018/12/18 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python reduce函数作用及实例解析
2020/05/08 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
药品促销活动方案
2014/02/14 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
机关工会工作总结2015
2015/05/26 职场文书
财产分割协议书
2016/03/22 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers