niginx反向代理解决前后端跨域问题

痛定思痛。 2024-02-18 20:44 44阅读 0赞

## 1、代理和跨域 ##

### 1.1 正向代理 ###

1）用户希望代理服务器帮助其和要访问服务器之间实现通信，需要：

a.用户IP报文的目的IP=代理服务器IP；

b.用户报文端口号=代理服务器监听端口号；

c.HTTP消息里的URL要提供服务器的链接；

2）代理服务器可以根据HTTP消息里的URL提供服务器的链接与服务器进行连接通信；

3）服务器返回网页；

4）代理服务器打包网页返回给用户；

### 1.2 反向代理 ###

单个服务器的处理客户端（用户）请求能力是有限的，当用户的请求达到一定数量时，会造成服务器忙，此时可以使用多个服务器共同分担这些请求，这些服务器提供相同的服务，对于客户端而言，这些没有任何区别。

反向代理的实现：

1）一个分发用户请求的负载均衡设备，将用户请求分发到空闲的服务器上；

2）服务器返回自己的服务到负载均衡设备；

3）负载均衡将服务器的服务返回用户；

注意：客户端做服务器域名解析时，返回的IP是负载均衡的IP，而不是服务器的IP，当新增/移除服务器时，只需要修改负载均衡的服务器列表，而不会影响现有的服务。

### 1.3 两种代理 ###

代理就是客户端请求交给服务器响应；反向代理就是代理服务器的响应返回给客户端；即正向代理是代理客户端，反向代理是代理服务器；

### 1.4 跨域 ###

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口都相同。浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

## 2、nginx ##

### 2.1 nginx介绍 ###

Nginx在前后端分离框架设计中，既可以作为前端的HTTP访问器，也可以通过简单配置实现负载均衡，还可以通过反向代理配置解决前后端分离的JavaScript跨域问题。

解决方案：Nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域问题。

### 2.2 nginx安装和配置 ###

#### 2.2.1 编辑nginx.conf文件 ####

进入/etc/nginx目录，编辑nginx.conf文件；将http 域内的整个server\{\}内容清除，找到include /etc/nginx/conf.d/\*.conf;这行，如果没有，添加到http \{\} 的关闭括号前一行，删除或注释掉其他的 include \*.conf行。

![985821-20180531175120998-261292820.png][]

#### 2.2.2 创建workload\_server.conf ####

在nginx.conf中已经添加：include /etc/nginx/conf.d/\*.conf;，所以先去/etc/nginx/conf.d目录，清空所有的内容，然后在该目录下创建workload\_server.conf文件；

![985821-20180531175140154-1337050310.png][]

### 2.3 部署反向代理 ###

upstream cas\_server\_http \{

\#ip\_hash;

server ip1 weight=1;

\#jvm\_route $cookie\_JSESSIONID|sessionid reverse;

upstream server\_app1\{

\#ip\_hash;

server ip2 weight=1;

upstream server\_app2\{

least\_conn;

server ip3 weight=1;

server \{

listen 8190 default\_server;

listen \[::\]:8190 default\_server;

server\_name \_;

location / \{

root /var/www/html;

\# root /usr/share/nginx/html;

index index.html index.htm index.nginx-debian.html;

try\_files $uri $uri/ =404;

\# apiApp

location /api1/ \{

proxy\_pass http://server\_app1/api1/;

proxy\_set\_header Host $http\_host;

\# apiService

location /api2/ \{

proxy\_pass http://server\_app2/api2/;

proxy\_set\_header Host $http\_host;

\# apiCas

location /cas/ \{

proxy\_pass http://cas\_server\_http/cas/;

proxy\_set\_header Host $host;

proxy\_cookie\_path /cas/ /;

proxy\_pass\_header Set-Cookie;

### 2.4 nginx操作 ###

#### 2.4.1 启动nginx ####

nginx

#### 2.4.2 停止nginx ####

nginx -s stop

#### 2.4.3 查看nginx进程 ####

ps -ef | grep nginx

#### 2.4.4 修改nginx.conf后重启nginx ####

nginx -s reload

## 3、问题 ##

### 3.1 端口被占用 ###

![985821-20180531175337177-507398913.png][]

解决方案：

![985821-20180531175348311-1211681852.png][]

![985821-20180531175352325-1957487818.png][]

### 3.2 403 forbidden ###

#### 分析： ####

当访问该地址的时候，nginx 会按照 index.html，index.htm ，index.php 的先后顺序在根目录中查找文件。如果这三个文件都不存在，那么nginx就会返回。

[985821-20180531175120998-261292820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a8e0d5342ed845878fa1912e56e01cc5.png
[985821-20180531175140154-1337050310.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d1a049e64eb5429abe0ba44c044c22f5.png
[985821-20180531175337177-507398913.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3e38ebb8b9eb46309ed55f9abb941d19.png
[985821-20180531175348311-1211681852.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dcabf028a2804fedb6407cc18a92d459.png
[985821-20180531175352325-1957487818.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3df9b4a876144dcd8676b8e4eeeb5dbd.png