前端代理和nginx反向代理

代理是前端无时无刻都会碰到的问题，利用个人的一些知识储备来谈谈个人对于代理的理解。

`前端代理`

`为什么需要代理`

由于浏览器的同源策略，如果域名、端口、协议任一不同，都会导致跨域问题。即前端接口去调用不在同一个域内的后端服务器而产生的问题。这个时候就需要使用代理进行访问目标服务器。

实例：

1、假设访问地址为/api/carlist；
2、此时通过axios访问它的属性baseURL，假设baseURL没有设置具体地址，那么就会通过window.location.host来拼接地址为http://localhost/api/carlist；
3、处于开发环境下的项目，会访问vite.config.js文件（这里用的是vite，如果是webpack，通过vue.config.js设置），在proxy属性中找到前缀为api的代理，将http://lacalhost的地址进行代理。
4、最终访问的地址是http://171.35.40.185:9028/api/carlist

单独说一下第二步的axios访问baseURL，不论是开发环境还是生产环境只要没有设置地址，就会自动的调用window.location.host方法来获取ip地址和端口去拼接访问的地址。

// vite.config.js 文件
export default defineConfig({server: {proxy: {'/api':{// 代理的目标地址target:'http://171.35.40.185:9028/', // 开启跨域changeOrigin:true, // 开启 websocketws:true,// 地址重写，如果访问的服务器没有/api就将地址重写，把/api取调rewrite: (path) => path.replace(/^\/api/, ''), },}}
})

`nginx反向代理`

可以这样去理解，前端的代理是接口访问的代理，而nginx的代理是整个项目的代理。

下方的实例，server块中的location是nginx的不同规则，proxy_pass是它代理的地址。
访问地址为：http://localhost:8081/index.html，就会去匹配地址访问location属性，匹配到'/'这个规则，访问http://localhost:8080/index.html
访问地址为：http://localhost:8081/images/abc.jpg，就会匹配到'images'规则，访问/data/images/abc.png。
具体可参考nginx官方文档

反向代理的图示：
反向代理是通过服务器进行的代理，就是我们的nginx服务器，访问地址是A实则范文的是B，通过A进行代理转发。
上图参考Nginx配置——反向代理

前端代理和nginx反向代理相关推荐

正向代理和Nginx反向代理配置介绍
正向代理和Nginx反向代理配置介绍 * Author QiuRiMangCao 秋日芒草* 正向代理(代理对象是pc) 是一个位于客户端(pc)和原始服务器(google.com)之间的服务器场景 ...
前端工程配置Nginx反向代理
前端开发时,想要通过正式域名直接访问到本地的开发环境,可以通过配置反向代理的形式来实现,如果开了反向代理,就走本地,不开则走线上. 配置两个反向代理,一个代理http页面,一个代理https页面,前者 ...
nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
sql server代理无法启动_谁说前端不需要懂Nginx反向代理与负载均衡
作者 | chenhongdong 链接 | https://juejin.im/post/5b01336af265da0b8a67e5c9 学到老活到老前端圈一直很新,一直要不停的学习,而且在进入 ...
使用nginx负载均衡的webservice wsdl访问不到_谁说前端不用懂，Nginx 反向代理与负载均衡（超实用）...
谁说前端不需要懂-Nginx反向代理与负载均衡学到老活到老前端圈一直很新,一直要不停的学习,而且在进入大厂的路上,还要求熟悉一门后台语言等等.用一句别人开玩笑的话来说,java十年前的技术现在还能 ...
前端跨域，nginx反向代理的解决方案
前端跨域,nginx反向代理的解决方案参考文章: (1)前端跨域,nginx反向代理的解决方案 (2)https://www.cnblogs.com/Yukiyi/p/7912223.html (3 ...
webstorm前端使用Nginx 反向代理解决跨域问题
1.webstorm设置端口 2. 3. 4. 5. 把项目放到nginx安装目录的html文件夹下: 6. 配置nginx.conf文件 server {listen 8090; #监听端口serv ...
nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录
在日常运维工作中,运维人员会时常使用到nginx的反向代理,负载均衡以及缓存等功能来优化web服务性能. 废话不多说,下面对测试环境下的nginx反向代理+缓存开启+url重写+负载均衡(带健康探测) ...
分布式与微服务系列（三）、SpringBoot+Zookeeper集群+Nginx反向代理+Dubbo分布式托管（提供者、消费者）
SpringBoot+Zookeeper集群+Nginx反向代理+Dubbo分布式托管(提供者.消费者) 一.软件架构和微服务需求 1.1.微服务需求 1.2.框架选择 1.3.集群分布(下面为此图实 ...

前端代理和nginx反向代理

`前端代理`

`为什么需要代理`

`nginx反向代理`

前端代理和nginx反向代理相关推荐

最新文章

热门文章