vue(2.x,3.0)配置跨域代理


Posted in Javascript onNovember 27, 2019

导语:首先,每一个前端开发人员都应该知道同源策略,同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,所谓同源是指,域名,协议,端口相同。有一个不同时,都将请求不到资源,将无法“跨域”获取资源。

vue(2.x,3.0)配置跨域代理

vue3.0

从最新版开始,首先是在所有请求的文件中写好请求

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

let apiCrfCod = Vue.axios.create({
 method: 'GET',
 baseURL: '/apis/' 
})

let apiResource = Vue.axios.create({
 method: 'GET',
 baseURL: '/service/'
})

getServiceChannels: (opts) => {
 return apiCrfCod({
  url: '/rest/collection/getService/XXXX', // 此处写地址,不具体举例
  params: {
  ...opts
  }
 })
 }

在vue.config.js中配置代理

module.exports = {
 baseUrl: '',
 outputDir: 'dist',
 devServer: {
 // 配置服务器代理
 proxy: {
  "/apis": { // 代理接口前缀为/apis的请求
  "target": 'https://www.baidu.com/', // 对应的代理地址
  "secure": false, // 接受运行在https上,默认不接受
  "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
  "pathRewrite": { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
   '^/apis': ''
   }
  },
  // 配置多个代理
  "/service": {
  "target": 'https://www.google.com/',
  "secure": false,
  "changeOrigin": true,
  },
 }
 },
}

vue2.X

请求还是按上述代码,下面是配置代理部分

在config文件夹下的index.js中,配置proxyTable,原本的proxyTable中为空

vue(2.x,3.0)配置跨域代理

proxyTable: {
  '/apis': {
  target: "https://www.baidu.com/", // 目标地址
  changeOrigin: true, // 是否跨域
  pathRewrite: { // 重定向地址
   '^/apis': ''
   }
  }
 },

上述就是vue3.0和2.x的配置跨域部分,记得配置完代理需重启项目!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Javascript中typeof 用法小结
May 12 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 #Javascript
vue实现浏览器全屏展示功能
Nov 27 #Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
vue-cli在 history模式下的配置详解
Nov 26 #Javascript
You might like
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js数组操作学习总结
2013/11/04 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python:slice与indices的用法
2019/11/25 Python
tensorflow的计算图总结
2020/01/12 Python
基于python检查矩阵计算结果
2020/05/21 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
个性发展自我评价
2014/02/11 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
死亡诗社观后感
2015/06/05 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
保姆聘用合同
2015/09/21 职场文书
商业计划书范文
2019/04/24 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers