前端代理服务器的配置原理

已于 2023-07-21 15:07:37 修改
阅读量320 收藏 1
点赞数 1
文章标签： 前端
于 2023-07-21 11:33:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74417967/article/details/131847909
版权
文章介绍了代理服务器在处理客户端请求时的角色，强调了代理地址与客户端地址的一致性以及解决跨域问题的重要性。同时，讨论了两种代理方式，一种针对单一后端服务器，另一种支持路径匹配的多代理配置。在VueCLI项目中，通过设置NODE_ENV变量可以实现多环境地址的切换。
摘要由CSDN通过智能技术生成

如下图：假如8080是客户端电脑地址，中间的小方块是代理服务器的地址，此地址要跟客户端电脑地址保持一致，代理服务器和后端服务器通讯不存在跨域的问题

 图二：第一种方式代理地址要填后端的服务器地址，意思是代理服务器要像那台后端服务器请求数据。

 第二种方式可以配置多个代理对象，比如只要你的请求路径里面带有/atguigu就帮你代理转发到5000服务器，只要你请求路径带有/demo就帮你代理转发到5001服务器

 如图三 请求路径前面带有代理标识符/atguigu就走第一个代理但是后端服务器文件地址是不带/atguigui的所以我们要在如图二哪里进行路径重写删除/atguigu，真正的请求路径是没有/atguigu的，他只是个匹配标识符，

标准的项目地址写法如下;

这里写一个'/api'也是可以的

 

 

 

如何配置切换多环境地址，参考如下方案：

vue/cli 3.0配置NODE_ENV_weixin_30768661的博客-CSDN博客

m0_74417967
关注
前端配置跨域（代理服务器）
qq_60976312的博客
12-15 2531
前端配置跨域（代理服务器）
web前端 代理服务器解决跨域
m0_72584945的博客
11-12 921
web前端 代理服务器解决跨域
前端跨域代理服务器
weixin_52563089的博客
03-04 537
服务器代理跨域
前端通过‘代理配置’的方式解决跨域
最新发布
m0_67841039的博客
02-08 147
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。如果没有vue.config.js文件，那就找到项目中config文件夹中的index.js文件。这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。
vue前端解决跨域，配置代理服务器
qq_48424428的博客
11-18 241
vue 解决跨域反向代理
配置前端代理
the_rookie_sj的博客
04-28 187
配置前端Vue2.0跨域代理 在config下的index.js文件下配置跨域代理 proxyTable: { "/api":{ target:“https://10.**.**", changeOrigin:true,//是否改变域名 secure:false, pathRewrite:{ //路徑重寫 "^/api":"" }
配置代理——解决跨域问题（详解）
M_emory_的博客
07-26 5161
配置代理——解决跨域问题（详解） 二、跨域问题的产生 当出现以下报错，看到 CORS 和 'Access-Control-Allow-Origin' 这两个关键信息的时候，就说明出现跨域问题了
当使用 history 模式的前端路由时静态资源服务器配置详解
纯爱枫若情的博客
05-19 2056
前言 对于前端工程师而言，多多少少会碰到按需加载的需求。 ​ 比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。 ​ 但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用 location.search 的方式，即通过参数来判断。 ​ 比如检测到用户没登陆，我们会刷新页面，自动在地址后面加上诸如 ?page=login 等形式的参数，
图解跨域请求、反向代理原理，对前端更友好的反向代理服务器 - Caddy
qq_34621851的博客
05-25 1823
写在开头 本文采用图文解析、结合实战的方式进行网络原理解析，帮助大家去掌握一些网络知识，并了解 Caddy 的基本使用（见下图）。 本人计划在近几年将持续输出深度好文，如果对这类文章感兴趣的话，还请您点个 关注 和 赞 支持一下吧！ 引言 大家好呀~ 本篇文章主要是安利一个对前端更友好的 web 服务器 Caddy，我们会介绍 Caddy 的安装使用，并通过图文来解析其原理。 Caddy 是唯一一个在默认情况下自动使用 HTTPS 的 Web 服务器，可以用来完成跨域请求、反向代理、静态文件服务器、部署.
前端解决跨域之代理服务器的方法
happy_1212的博客
12-03 514
前端解决跨域之代理服务器的方法 常用共三种: 服务端解决: cors–—实际开发最常用 前端解决: 代码proxy ––开发时常用, 如果发布成产品 不会使用! 前端+后端共同解决: jsonp ––原理是 script 不会被 同源策略影响, 很少用. angular的 proxy 解决方案 •创建 src/proxy.conf.json •配置: 让启动时自动加载代理文件 •启动时的替换原理: •重新启动: ionic s 即可 这篇文章对你有帮助吗？作为一名程序猿，在评论区留下你的困惑或你的
Niginx 配置前端代理服务器和常见问题
smx
11-13 467
一、 nginx配置步骤 首先在官网http://nginx.org/en/download.html下载nginx，下载它的稳定版本 然后在nginx-1.16.1\conf下修改配置文件nginx.conf 配置代理如下 server { listen 8089; server_name localhost; ...
前端代理配置
qq_45031347的博客
03-17 1196
Nginx反向代理
前端vue的配置跨域代理服务器
m0_66702519的博客
11-29 1286
vue2的前端配置proxy代理跨域问题解决方案
前端 Proxy代理的配置
qq_41328653的博客
09-09 2641
devServer: { host: "0.0.0.0", port: 8080, open: true, //配置自动启动浏览器 headers: { 'Access-Control-Allow-Origin': '*', }, proxy: { '/api/': { target: process.env.VUE_APP_BASE_API, secure: false,// 如果是htt
配置代理服务器
薛定谔的猫
03-28 3569
vue脚手架配置代理方法一。
前端配置跨域代理
jiuge1234的博客
07-29 6173
前端配置跨域代理
一个简单的前端代理服务器，用于前端打包上线、测试前的自测
一只肥宅丫的博客
09-07 4229
1.安装依赖 npm install express --save npm install http-proxy-middleware 2.配置 将app.js和index.js放在打包出来的文件同级目录，目录里只能存在打包出来的文件夹及node_modules文件夹（原因：代码获取除node_moudules文件夹外的文件夹名字作为静态资源路径） 在配置文件index.js里配置代理信息 参考：https://github.com/chimurai/http-proxy-middleware 3.运行
2024年Web前端最新配置代理——解决跨域问题（详解）_前端配置代理解决跨域(1)，面试字节跳动前端工程师该怎么准备
2401_84412194的博客
05-06 1258
*cors 解决跨域，不需要前端做任何事情，只需要后端返回数据的时候加特殊的响应头即可。
前端开发服务器中的 Proxy 代理跨域实现原理解读
公众号 @ 桃小瑞
02-01 5375
在前端的开发过程中，尤其是在浏览器环境下，跨域是个绕不开的话题，相信每个前端都会涉及到这个问题，记住的就直接手敲解决跨域问题，记不住的就只能问度娘了。😂😂
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值