Vue跨域请求问题解决方案过程解析


Posted in Javascript onAugust 07, 2020

一、这是我们本次要请求的url接口地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php

Vue跨域请求问题解决方案过程解析

查看页面响应信息,提示跨域有问题

Vue跨域请求问题解决方案过程解析####

二、解决上面跨域问题:根目录写入以下vue.config.js

// vue.config.js

module.exports = {
 devServer: {
  proxy: {
   // 配置跨域
   '/api': {
    target: 'http://iwenwiki.com',
    ws: true,
    changOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 },
}

三、然后在发送ajax请求的地方做如下操作,使用在上面文件中配置的api。api/blueberrypai/getBlueBerryJamInfo.php是我的请求路径一部分,根据自己具体需求写。然后请求就可以成功发送。

Vue跨域请求问题解决方案过程解析

配置完成之后一定要重启(重点!!!)

Vue跨域请求问题解决方案过程解析####

四、如果想不填写其中“/api”,也可以去main.js中配置全局配置,具体如下

Vue跨域请求问题解决方案过程解析Vue跨域请求问题解决方案过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 #Javascript
浅谈javascript如何获取文件后缀名
Aug 07 #Javascript
You might like
PHP常用的缓存技术汇总
2014/05/05 PHP
smarty简单应用实例
2015/11/03 PHP
php实现微信支付之现金红包
2018/05/30 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
AngularJS directive返回对象属性详解
2016/03/28 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python调用c++传递数组的实例
2019/02/13 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python的json包位置及用法总结
2020/06/21 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
技术入股合作协议书
2016/03/21 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书