nginx怎么用反向代理解决跨域的原理上网？

来源：蜘蛛抓取(WebSpider) 时间：2024-05-15 03:32 标签： 反向代理解决跨域的原理
需求有这样一个需求：项目中跳转到某个地址，但这个地址不想暴露给用户。因此我们想到要做一层代理，通过项目某个路径直接用ngnix代理到这个地址。查询相关文档后，发现方案如下：用return 302location /myBaidu {
return 302 http://baidu.com;
}
这种方案会直接跳转到baidu，并且会改变域名，相当于直接location.href = 'baidu.com' ，显然并不适合我们的需求。我们想要的效果是代理到百度，但是浏览器的url框内还是/sparkMonitor，那么就用proxy_pass用proxy_pass假设我们的网站域名为 http://myorigin.com/location /myBaidu {
proxy_pass http://www.baidu.com/;
}
这样配置后就可以由http://myorigin.com/myBaidu直接访问到百度页面，如下图关于proxy_pass使用的语法，与/有关当路径加上/：相对路径，此时相当于代理到http://www.baidu.com/location /myBaidu {
proxy_pass http://www.baidu.com/;
}
如果访问http://myorigin.com/myBaidu/abc就相当于访问http://www.baidu.com/abc当路径不加/：绝对路径，，此时相当于代理到http://www.baidu.com/myBaidulocation /myBaidu {
proxy_pass http://www.baidu.com;
}
如果访问http://myorigin.com/myBaidu/abc就相当于访问http://www.baidu.com/myBaidu/abc当路径加上/xxx/location /myBaidu {
proxy_pass http://www.baidu.com/xxx/;
}
如果访问http://myorigin.com/myBaidu/abc就相当于访问http://www.baidu.com/xxx/abc当路径加上/xxxlocation /myBaidu {
proxy_pass http://www.baidu.com/xxx;
}
如果访问http://myorigin.com/myBaidu/abc就相当于访问http://www.baidu.com/xxxabc其他问题用proxy_pass的方案反向代理到百度页面，没有任何问题。但是我们项目中是要求跳转到某个内网域名，而且此域名和http://myorigin.com/并没有互通，因此配置代理时，需要配置成ip地址，然后代理成功跳转但此时打开代理的页面显示没有样式，查看控制台发现了报错如下：点进去查看错误如下图由此，问题就很明显了，代理的网站用了根目录绝对路径去找到/static下的jquery文件，因此会直接在我们项目的域名下找http://myorigin.com/static文件，这样是怎么也无法找到代理项目的/static文件，因此jquery找不到报错，页面样式失效而且不只是/static文件，可能还有其他文件也找不到，而且还有可能路径与路由冲突，引发问题因此，我们可以得出结论，前端项目的nginx的配置转发到其他网站需要慎重，不是所有网站都可以走前端代理的，需要具体情况具体分析以上就是nginx的配置转发到其他网站详解的详细内容，更多关于nginx配置转发网站的资料请关注脚本之家其它相关文章！
“反向”自然是相对“正向”来说的，想理解反向代理，我们就得知道什么是正向代理？正向代理可以理解为我们平常所说的科学上网，帮助客户端发出并获取服务器资源，客户端知道正向代理的存在。所以，正向代理是为客户端服务的，与客户端的关系更密切（跟服务器关系一般，不熟）比如我们想要访问的网站有IP地址的限制，我们需要一个IP去帮助我们绕过地域限制，正向代理就起作用了。帮助我们获取该网站的信息，再传回给我们。正向代理在这里的作用就是隐藏我们的身份，帮我们去跟服务端做交互。理解了正向代理之后，接着我们来看看反向代理：反向代理是面向服务器的，反向代理会接收到客户端的请求，并把请求分发到相对应的服务器，实际上处理请求的是服务器，但客户端会认为是反向代理在处理请求。所以，反向代理更靠近服务器，与服务器的关系更密切，并且只提供有限的一些资源（不像正向代理能从网络获取各种资源）比如说我们比较常见的 Nginx 的代理功能与负载均衡，当一台服务器状态异常时，为了不让客户端等待超时Nginx会把请求分发到另一台服务器上，服务器再通过反向代理传回信息给客户端。这时对于客户端来说会觉得Nginx反向代理就是服务器，并不清楚实际上是哪个服务器传回来的信息。这保护了服务器的身份信息，并且对于一些恶意频繁访问服务器的请求也能起到防御措施。总的来说，正向代理和反向代理都是一个 “替人办事”，区别就在于，正向代理是伪造客户端，隐藏了客户端的真实身份；反向代理是伪造服务端，保护了服务端的安全。如果您有购买代理IP的需求，希望以下这篇文章能帮到您。经常会碰到一些项目，其服务虽然在线上是通过同一个域名公开访问的，但是开发时，却是由多个不同的子项目组成的。在本地可以单独启动单独测试，一般是通过端口区分。在本地联调时，不想单独做很复杂的配置的话，就需要模拟线上环境，在同一个端口下把多个项目跑起来。这就需要用到反向代理。假设有两个项目，单独启动时，分别运行在 5001 和 5003 端口，但是现在希望在本地能够通过 https://local.dev.example.com:5000 来访问，其中 /client/* 指向 5003 项目，而其他路由指向 5001 端口。 域名在本地，可以配置一个 hosts （/etc/hosts）来模拟线上环境：127.0.0.1
localhost
255.255.255.255 broadcasthost
::1
localhost
127.0.0.1 local.dev.example.com
用 docker compose nginx 做反向代理当然也可以用 nginx，如果不想安装和配置，建议使用 Docker compose 方案：version: '3.4'
services:
localproxy:
build:
context: ./LocalProxy
dockerfile: Dockerfile
ports:
- "5000:80"
networks:
default:
aliases:
- local.dev.example.com
client:
build:
context: .
dockerfile: client/Dockerfile
ports:
- "5003:80"
server:
build:
context: .
dockerfile: server/Dockerfile
ports:
- "5001:80"
networks:
default:
name: example_network以上，通过 docker compose up 启动后，将 server 项目的 5001 映射到 80 端口，而 client 项目的 5003 也映射到 80 端口。而反向代理服务将 5000 映射到 80 端口。这样就可以通过 https://local.dev.example.com:5000 的方式访问到 client 和 server 了。client 和 server 的 Dockerfile 根据具体的项目来写，而 localproxy 的 Dockerfile 是基于 nginx 的，内容如下：FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
RUN apk add --update openssl && \
rm -rf /var/cache/apk/*
RUN mkdir -p /etc/nginx/ssl/certs
RUN mkdir -p /etc/ssl/private/
RUN openssl req -x509 -nodes -days 365 -subj "/C=CA/ST=QC/O=Example, Inc./CN=local.dev.example.com" -addext "subjectAltName=DNS:local.dev.example.com" -newkey rsa:2048 -keyout /etc/ssl/private/nginx-selfsigned.key -out /etc/ssl/certs/nginx-selfsigned.crt;
EXPOSE 80
EXPOSE 443
EXPOSE 5000虽然完全可行，但是比较麻烦。如果不想用 Docker compose 也不想用 nginx，就可以使用 Caddy 来完成同样的事情：用 caddy 来做反向代理同样也需要在 hosts 里增加域名。安装 caddy如果没有安装，可以通过 brew install caddy（Mac）或者 choco install caddy（Windows）安装 caddy。添加 Caddyfile在项目的根目录下新建 Caddyfile 文件，内容如下：https://local.dev.example.com:5000 {
tls internal
reverse_proxy /client/* http://local.dev.example.com:5003
reverse_proxy http://local.dev.example.com:5001
}运行 caddycaddy run分别启动项目后，同样可以使用 https://local.dev.example.com:5000 来访问 server 和 client 了，效果和 nginx 方案完全一样！本文由叽歪同步助手自动同步而来，原文链接是： https://jeff-tian.jiwai.win/posts/rsamx22lxfa036uq 。

我要回帖

更多关于 反向代理解决跨域的原理 的文章

 

随机推荐