概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官方的CORS,还有一种就是利用<script>中的src(就是jsonp),

在vue中则可以使用代理服务器来解决跨域的问题。

接下来有俩种方法的展示和介绍:

在vue.config.js里面进行配置
一:

devServer: {
        proxy:'http://localhost:5000'     //代理服务器的目标的基础路径
    }
 

二:

devServer: {
        proxy: {
            '/first': {
                target: 'http://localhost:5000',   //代理目标的基础路径
                pathRewrite: { '^/first': '' },      //重写路径,将代理服务器发送给服务器的请求路径进行更改,这样就可以让服务器收到的请求正常
                ws: true,     //用于支持websocket
                changeOrigin: true     //用于控制请求头中的host值
               
            },
        }
    }
但是这种需要在配置axios的路径的时候,在后方加入设置好的前缀
例:
methods: {
    add(){
      axios.get('http://localhost:8080/first/students').then(
        response=>{console.log("请求成功了",response.data)},
        error =>{console.log("请求失败了",error.message)}
      )
    }
  },
区别于优缺点:
第一种优点:配置相对简单
缺点:只能配置一个代理,就是当后台服务器超过一台的时候,便不再适用,而且当你前端资源(public)上面如果有名字相同的文件,vue会自动将本地的资源视为优先,则会导致你请求后台的数据变成你自己曾经写的公共数据,获取不到后台的数据,则不能灵活的控制是否进行代理。
第二种优点:可以配置多个代理,而且还可以灵活的控制是否进行代理,也通过这样控制是否进行代理,加入了就进行代理,优先后台的资源,不加则只会获取前端资源,前端资源里面没有则报错
缺点:配置相对复杂一点点,而且需要加前缀
  

vue中axios配置代理的俩种方式及优缺点的更多相关文章

  1. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  2. 【转】【WCF】WCF中客户端生成代理的两种方式

    WCF程序中客户端要生成代理才能调用服务,在客户端生成代理有多种方式,如用ChannelFactory和添加服务引用等.下面就分别来介绍下这两种生成代理的方式. 使用ChannelFactory 使用 ...

  3. 在Vue中输入框自动获取焦点的三种方式

    原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...

  4. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  5. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  6. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  7. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  8. vue中axios的安装使用

    axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...

  9. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

随机推荐

  1. Django-Model随笔

    Django数据库之Model 常用命令 生成迁移文件 python manage.py makemigrations 实行数据库迁移 python manage.py migrate 数据库表结构反 ...

  2. Flink中如何实现一个自定义MetricReporter

    什么是 Metrics 在 flink 任务运行的过程中,用户通常想知道任务运行的一些基本指标,比如吞吐量.内存和 cpu 使用情况.checkpoint 稳定性等等.而通过 flink metric ...

  3. 深入C++04:模板编程

    模板编程 函数模板 模板意义:对类型也进行参数化: 函数模板:是不编译的,因为类型不知道 模板的实例化:函数调用点进行实例化,生成模板函数 模板函数:这才是要被编译器所编译的 函数模板.模板的特例化. ...

  4. 前端3JS2

    内容概要 运算符 流程控制 三元运算符 函数 自定义对象 内置对象 JSON对象 正则对象 内容详情 运算符

  5. 程序分析与优化 - 7 静态单赋值(SSA)

    本章是系列文章的第七章,终于来到了鼎鼎大名的SSA,SSA是编译器领域最伟大的发明之一,也是影响最广的发明. 本文中的所有内容来自学习DCC888的学习笔记或者自己理解的整理,如需转载请注明出处.周荣 ...

  6. C语言学习之我见-strncat()可调整的字符串拼接函数

    strncat()函数,用于两个字符串的拼接. (1)函数原型 char * strncat(char * Dest,const char * Source,size_t _Count)` (2)头文 ...

  7. SQL注入漏洞篇

    一篇SQL注入漏洞汇总,更新中-- 如有缺陷 望大佬指正 SQL注入产生的原因? 当程序执行逻辑时没有对用户输入的参数做过滤处理,使参数直接与后台数据库产生逻辑交互,即SQL注入黑客就可以利用各种SQ ...

  8. 修改jupyter notebook文件保存目录

    我们安装好jupyter notebook之后,打开的默认地址是在C盘,文件保存的文字也是C盘,会有其它乱七八糟的东西放一起,很不方便,所以可以换一个保存位置 1. 首先,在要存放文件的位置新建文件夹 ...

  9. 深入理解 happens-before 原则

    在前面的文章中,我们深入了解了 Java 内存模型,知道了 Java 内存模型诞生的意义,以及其要解决的问题.最终我们知道:Java 内存模型就是定义了 8 个基本操作以及 8 个规则,只要遵守这些规 ...

  10. nextInt和nextLine以及next方法的区别

    1.nextInt() 只读取整型的数据,输入读取完之后,光标仍在当前行. 2.nextLine() 扫描到一行内容,当遇见换行符时,结束扫描.一旦输入读取完毕,该方法会将光标移到下一行开始的位置. ...