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 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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
?生?D片??C字串
2006/12/06 PHP
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
土木工程专业大学毕业生求职信
2013/10/13 职场文书
中学生班主任评语
2014/01/30 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
北京天坛导游词
2015/02/12 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
告知书格式
2015/07/01 职场文书
公司考勤管理制度
2015/08/04 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
PyTorch的Debug指南
2021/05/07 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技