详解vue-cli3 中跨域解决方案


Posted in Javascript onApril 10, 2019

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批)

前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

0:前提条件

1:安装vue-lic

2:安装axios  用于发送请求。

1:将任何未知请求转发到代理服务器

如:

前端地址:127.0.0.1

后端地址:127.0.0.2

当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api

module.exports={
  devServer:{
    proxy: "http://www.acfun.cn"
  }
}

2:多代理控制

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
  devServer: {
    proxy: {
      '/search': {  // search为转发路径
        target: 'http://www.acfun.cn', // 目标地址
        ws: true, // 是否代理websockets
        changeOrigin: true  // 设置同源 默认false,是否需要改变原始主机头为目标URL,        
      }
    }
  }
};

如:

当前访问地址为  xxx.xxx.xxx/search时,就会被转发到代理服务器http://www.acfun.cn/search

xxx.xxx.xxx/search -> http://www.acfun.cn/search

 3:实例

api.js 文件(主要用于全局配置)

import Axios from "axios";

let http = Axios.create({
  timeout: 3000,  //超时配置 3秒
  responseType: 'json',  // 响应数据格式
  responseEncoding: 'utf8', // 响应数据编码
});

export default http;

入口文件  main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import http from "./api";  // 引用axios全局配置

Vue.config.productionTip = false;

Vue.prototype.$http = http;  // 添加原型方法,这样创建的对象就自带该方法了。

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

vue.config.js 配置文件

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
  devServer: {
    proxy: {
      '/search': {
        target: 'http://www.acfun.cn',
        ws: true,//是否代理websockets
        changeOrigin: true  // 设置同源 默认false,是否需要改变原始主机头为目标URL
      }
    }
  }
};

总结

以上所述是小编给大家介绍的vue-cli3 中跨域解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让复选框只能选择一项的方法
Oct 08 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
js中数组常用方法总结(推荐)
Apr 09 #Javascript
JS隐藏号码中间4位代码实例
Apr 09 #Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 #Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 #Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
You might like
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python表达式的优先级详解
2020/02/18 Python
Python如何执行系统命令
2020/09/23 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
自荐信结尾
2013/10/27 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
学习雷锋活动总结
2014/04/29 职场文书
城管大队整治方案
2014/05/06 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
门球健将观后感
2015/06/16 职场文书
领导离职感言
2015/08/03 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
学生会干部任命书
2015/09/21 职场文书