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 相关文章推荐
让alert不出现弹窗的两种方法
May 18 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
两个Javascript小tip资料
2010/11/23 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python装饰器用法实例总结
2018/02/07 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Django框架视图函数设计示例
2019/07/29 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
EJB的基本架构
2016/09/22 面试题
探矿工程师自荐信
2014/01/24 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
实习护士自荐信
2014/06/21 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android