代理到底是怎么一回事

前言

在我们做项目的时候,本地运行发现前端请求的地址与后端接口提供的地址并不一致,这时候就有人说,你做个代理就可以解决这个问题了。那么代理是什么,是怎么解决地址不一样还能请求到后端呢?

同源策略

当我们请求的地址与目标服务器的地址不一样会请求失败,是因为浏览器对 javascript 实施的安全限制,不允许非同源的 URL 之间进行资源的交互,当不同源的时候会把当前请求拦截掉,表示该请求为跨域请求,那么怎么判断为不同源呢?

跨域

当协议、域名/IP、端口只要有一个不一样就为跨域,例如 http://localhost:3000/ , http 部分为协议,localhost 部位为域名或者 IP 地址,3000 为端口。

代理

那么为了解决跨域问题,可以使用代理来解决这个问题。当我们所发送的请求都会由代理服务器代为转发,而代理服务器的地址与当前使用的地址一致,便解决了跨域问题,可以请求到目标服务器拿到数据。

而代理也有正反之分

  • 正向代理 代理服务器代理代替客户端,去和目标服务器进行请求交互,即代理客户端。例如 vue 中的 proxy 代理
  • 方向代理 代理服务器代理目标服务器,去和客户端进行交互,即代理服务端。例如 nginx 进行反向代理

正向代理

正向代理是为客户端服务的,客户端可以根据正向代理访问到它本身无法访问到的服务器资源。

在 vue 的项目中,我们可以这样进行代理设置:在项目根目录下有 vue.config.js 这么一个文件,在里面可以进行一些项目的配置,这里去进行代理,去到 proxy 进行配置。

  • proxy 属性是用于配置代理的规则,它是一个对象,可以配置多个代理规则对象,其中对象的键值为需要代理的接口路径
  • target 表示代理的目标服务器地址
  • changeOrigin 表示是否改变请求的源地址
  • pathRewrite 用于重写请求的路径,如果后台接口包含这个前缀的话,就不用重写
js 复制代码
proxy: {
'/api': {
    target: 'http://192.168.0.111',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
        '^/api': ''
    }
  },
}

在 vue.config.js 文件中配置的代理只是解决了开发环境中的跨域,到时候上线了如果还是要进行跨域请求的话,就可以使用 nginx 进行反向代理

反向代理

反向代理 是指以代理服务器来接收客户端上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器返回的内容返回给请求连接的客户端。

其实就是为服务器服务的,可以帮助服务器接收客户端的请求,帮助服务器做请求转发,负载均衡、防范攻击、缓存等。

  • 防范攻击,为了服务器的安全,不允许用户直接请求解除到真实服务器,任何的访问都要先到代理服务器,由代理服务器进行验证、过滤白名单等操作,符合条件的才会转发到真实服务器
  • 负载均衡,当一个网站访问的人数过多的时候,服务器承受的请求压力会很大,这时候需要添加多个服务器来承受这些请求,然后在这些服务器前面添加代理服务器,做负载均衡,用户请求先到代理服务器,让它来决定请求转发给对应的服务器
  • 缓存,当反复跳转重复请求同一个内容的时候,内容是一样的,但是每次都要请求到服务器上,会占用服务器资源,这时候可以让代理服务器承担这工作,将一些重复、常用的内容缓起来,当请求到这些资源时,就可以直接返回给用户,不必转发给服务器,减轻服务器的压力

nginx

nginx 是一个高性能的HTTP和反向代理服务器,它是整个项目的代理,不同于 vue 中的 proxy 只是一个接口的代理。

首先需要去下载 nginx

js 复制代码
// nginx 基本配置结构
events{
	
}
http{
	server{
		location path
		{
			...
		}
		location path
		{
			...
		}
	}
	server{
		...
	}
}

一个 http 可以配置多个 server

js 复制代码
server{ 
    listen 80; 
    server_name pc.server.com; 
    location /{ 
        proxy_pass hd.server.com; 
    } 
}
  • listen 用来监听端口
  • server_name 前端的域名
  • proxy_pass 后端服务的域名

当访问到 pc.server.com 就会转发给 hd.server.com 去处理

结论

代理可以让我们对目标的访问控制,并且可以在其中增加额外的功能,在解决跨域问题的时候就可以使用代理,去控制请求的访问,并且代理分为正向代理和反向代理,正向代理为代理客户端,反向代理为代理服务器。代理能来帮助我们更好更快的完成项目的开发和部署。

相关推荐
Cacciatore->1 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~2 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo4 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末22 分钟前
React——基础
前端·react.js·前端框架
aklry34 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9341 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子42 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982442 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug44 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo44 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos