详解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 相关文章推荐
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JavaScript实现HSL拾色器
May 21 Javascript
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+mysql 实现身份验证代码
2010/03/24 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
使用Python来开发微信功能
2018/06/13 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python绘制雷达图实例讲解
2021/01/03 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
自我鉴定怎么写
2013/12/05 职场文书
学生生病请假条范文
2014/02/16 职场文书
丧事主持词大全
2014/04/02 职场文书
产品设计开发计划书
2014/05/07 职场文书
2015年招生工作总结
2015/05/04 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python