解决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入门教程 Cookies
Jan 31 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JS异步错误捕获的一些事小结
Apr 26 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
js脚本编写简单刷票投票系统
2017/06/27 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python中常见的异常总结
2018/02/20 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
HTML5标签小集
2011/08/02 HTML / CSS
应聘收银员个人的求职信
2013/11/30 职场文书
个人公开承诺书
2014/03/28 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL