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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
javascript语句中的CDATA标签的意义
May 09 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
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设计模式 php实现状态模式
2015/12/07 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JavaScript ParseFloat()方法
2015/12/18 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python用什么编辑器进行项目开发
2020/06/17 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
医院病假条范文
2015/08/17 职场文书