解决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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
webpack入门必知必会
Jan 16 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
vue实现表格合并功能
Dec 01 Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python zip()函数使用方法解析
2019/10/31 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python标准库itertools的使用方法
2020/01/17 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
信仰心得体会
2014/09/05 职场文书