2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据

文章目录

0.反向代理是什么?
- 1、正向代理(forward proxy)
- 2、反向代理(Reverse proxy)
1.为什么要配置反向代理?
2.如何实现vue中配置反向代理?
- 2.1.安装和引入axios库
- 2.2. 配置文件vue.config.js
- 2.3.使用axios

0.反向代理是什么?

1、正向代理(forward proxy)

客户端想要访问一个服务器，但是它可能无法直接访问这台服务器，
这时候这可找一台可以访问目标服务器的另外一台服务器，
而这台服务器就被当做是代理人的角色 ，称之为代理服务器，
于是客户端把请求发给代理服务器，
由代理服务器获得目标服务器的数据并返回给客户端。
客户端是清楚目标服务器的地址的，而目标服务器是不清楚来自客户端，
它只知道来自哪个代理服务器，所以正向代理可以屏蔽或隐藏客户端的信息。

2、反向代理(Reverse proxy)

从上面的正向代理，你会大概知道代理服务器是为客户端作代理人，
它是站在客户端这边的。其实反向代理就是代理服务器为服务器作代理人，站在服务器这边，
它就是对外屏蔽了服务器的信息，常用的场景就是多台服务器分布式部署，
像一些大的网站，由于访问人数很多，就需要多台服务器来解决人数多的问题，
这时这些服务器就由一个反向代理服务器来代理，
客户端发来请求，先由反向代理服务器，
然后按一定的规则分发到明确的服务器，
而客户端不知道是哪台服务器。常常用nginx来作反向代理。

1.为什么要配置反向代理?

前后端分离的网站下,不同源的网站不允许发送ajax请求
解决办法：

jsonp跨域:原理不用ajax，使用script标签，script标签不受同源策略的影响，缺点是script只能是get请求
反向代理原理:避免跨域服务器给服务器发请求

2.如何实现vue中配置反向代理?

步骤和示例

2.1.安装和引入axios库

安装命令: npm install axios,node-modules文件夹中有axios文件夹即成功安装
在vue项目App.vue的script标签中引入:import axios from "axios"

2.2. 配置文件vue.config.js

在项目中的位置:

vue-config.js
代码复制

module.exports = {devServer: {proxy: {'/ajax': {target: 'http://m.maoyan.com',changeOrigin: true}}}
}

2.3.使用axios

发送get请求:
App.vue

export default {mounted(){axios.get("/ajax/movieOnInfoList?token=").then(res=>{console.log(res.data);})}
};

2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据相关推荐

vue通过axios获取json数据
文章目录前言一.axios的安装二.通过axios.get()方法获取json数据 2.1下面的代码是通过axios.get()获取json数据 2.2显示json数据总结前言今天学习了通 ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
如何解决@RequestParam无法接收vue+axios传递json数据
文章目录 axios的post请求无法发送到后端 1.问题 : axios的post的传递的json数据无法接收 2.问题代码 3.问题归因 4.问题解决 5.查漏补缺 axios的post请求无法发 ...
2021/11/18学习笔记：城市建成区的边界
老师让我做城市建成区的边界卒这咋做啊... 这小半个月都在做这个了... 把思路整理一下,免得以后忘记了. 数据来源: 1.夜间灯光数据:Chen Zuoqi, Yu Bailang*, Yang ...
vue框架可以配合php做企业站,基于Vue和PHP打造前后端分离的通用管理系统（一）...
实用人群适合小白入门,高手请绕行技术栈 javascript vuejs webpack babel eslint nodejs axios php mysql redis git vagrant ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
vue实现搜索框记录搜索历史_2018-09-13 基于Vue的搜索栏功能实现（we-ui）
视图代码搜索取消 {{item.userName}} Script代码 mounted() { this.$ajax({ method: "get", url: ". ...
php获取网页js中的json,从php获取json数据使用js读取显示到网页笔记
//json与数组转换 $array = array("username" => "hellojson","age" => 23 ...
Bili狂神说Vue笔记
1.前端知识体系想要成为真正的"互联网Java全栈工程师"还有很长的一段路要走,其中前端是绕不开的一门必修课.本阶段课程的主要目的就是带领Java后台程序员认识前端.了解前端.掌 ...

2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据

文章目录

0.反向代理是什么?

1、正向代理(forward proxy)

2、反向代理(Reverse proxy)

1.为什么要配置反向代理?

2.如何实现vue中配置反向代理?

2.1.安装和引入axios库

2.2. 配置文件vue.config.js

2.3.使用axios

2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据相关推荐

最新文章

热门文章