解决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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript下function声明一些小结
Dec 28 Javascript
Javascript 二维数组
Nov 26 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
KnockoutJs快速入门教程
May 16 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
javascript实现弹出层效果
Dec 10 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP新手上路(七)
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
window.open的功能全解析
2006/10/10 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
JS实现简易日历效果
2021/01/25 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python3字符串操作总结
2019/07/24 Python
python中的列表与元组的使用
2019/08/08 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
爱心捐款倡议书范文
2014/05/12 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014年教务处工作总结
2014/12/03 职场文书
中学政教处工作总结
2015/08/13 职场文书
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL