SpringBoot 实现前后端分离的跨域访问（Nginx）

xds@松哥

已于 2024-05-29 17:58:38 修改

阅读量2.6k

点赞数

于 2018-10-31 13:42:45 首次发布

本文链接：https://blog.csdn.net/xudasong123/article/details/83582626

版权

Spring boot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

序言：使用Nginx反向代理，可以解决跨域无权和Session丢失的问题，十分方便。下面我们以前后端分离为案例，展开Nginx的使用教程。

一. 配置和启动Nginx

Nginx介绍

Nginx配置文件的文件结构：

... #全局块
events { #events块
   ...
}

http { #http块
   ... #http全局块
server { #server块
   ... #server全局块
location [PATTERN] { #location块
   ...
}
location [PATTERN] {
           ...
}
}
... #http全局块
server {
   ...
location [PATTERN] {
   ...
}
location [PATTERN] {
           ...
}
}
}

基本配置：

在Nginx配置文件中每一条指令都需要用;结尾。

配置运行Nginx的用户和用户组：

user user [group];

其中：user：指定可以运行Nginx服务器的用户；group：可选项，指定可以运行Nginx服务器的用户组

配置worker_processes：

worker_processes number | auto;

其中：number：指定Nginx进程最多可以产生多少个worker_processes数。auto：Nginx将自动检测。此命令只能在全局块中设置。

配置Nginx进程PID存放的位置：

Nginx是采用守护进程进行，我们需要在某文件中保存当前运行的程序的主进程号。Nginx支持对它的存放路径进行自定义配置，指令是pid：

pid nginx.pid
注意：在指定文件时，一定要指定到具体的文件上，不能为目录名。此命令只能在全局块中配置。

配置错误日志的存放路径：

在全局块、http块、server块中都可以对Nginx服务器的日志进行相关配置。

error_log file|stderr [debug|info|notice|warn|error|crit|alert|emerg]

Nginx服务器的日志支持输出到固定文件file或者输出到标准错误输出stderr。

日志级别是可选项，debug的日志级别最低，emerg日志级别最高。在设置某一级别日志后，比它级别高的日志也会记录。

需要注意的是：指定的日志文件一定要对运行Nginx的用户具有写权限，否则在启动Nginx进程时就会报错。

配置文件的引入：

在一些情况下，我们可能需要将其它Nginx配置或者第三方模块的配置引入到当前的主配置文件中。Nginx采用include指令来完成引入：

include file;
注意：此指令可放在配置文件任何地方。新引入的文件同样要求运行Nginx进程的用户需要对其具有写权限，并符合Nginx配置文件规定的相关语法和结构。

设置是否允许同时接收多个网络连接：

每个Nginx服务器的worker_processes都有能力同时接收多个新到达的网络请求，但这需要在配置文件中进行设置：

multi_accept on|off;
此指令默认为关闭（off）状态。此指令只能在events块中进行配置。

配置服务日志：

Nginx服务日志支持对服务日志的格式、大小、输出等进行配置，需要使用两个指令，分别是access_log和log_format指令。

access_log指令

access_log path [format [buffer=size]];

path：配置服务日志的存放路径和名称。
format：可选项，自定义服务日志的格式，也可以通过“格式串的名称”使用log_format指令定义好的格式。
size：配置临时存放日志内存缓冲区大小。

此指令可以在http块、server块或者location块中进行配置，默认配置为：

access_log logs/access.log combined; #combined为log_format指令默认定义的日志格式字符串名称

如果取消服务日志记录功能，则使用：

access_log off;

log_format指令：

log_format name string ...;

name：格式字符串的名称
string：服务日志的格式字符串。在定义过程中，可以使用Nginx预设定一些变量获取相关内容。

反向代理配置：

proxy_pass指令：

该指令用来设置被代理服务器的地址，可以是主机名称、IP地址加端口号的形式。其语法如下：

proxy_pass URL;

其中URL就是要设置的被代理服务器的地址，包含传输协议、主机名称、IP地址加端口号。传输协议通常是http://和https://。

proxy_pass http://192.168.0.12:8080/uri;
proxy_pass http://192.168.0.13:8080/uri;
proxy_pass http://192.168.0.14:8080/uri;

如果被代理的是一组服务器的话，可以使用upstream指令配置后端服务器组。例如：

upstream proxy_svrs{
server http://192.168.0.12:8080/uri;
   server http://192.168.0.13:8080/uri;
   server http://192.168.0.14:8080/uri;
}
server{
listen 80;
server_name www.myweb.com;
location / {
   proxy_pass proxy_svrs;
   }
}

在组内的各个服务器已经指定传输协议http://，而在proxy_pass指令中就不需要指明了。

在使用proxy_pass指令的过程中还需要注意的是，URL中是否包含URI。Nginx处理方式是不同的。如果URL中不包含URI，Nginx将不会改变原地址的URI；但如果包含了URI，Nginx服务器将会使用新的URI替代原来的URI。如下示例：

server {
listen 80;
server_name www.myweb.com;
location /server/ {
proxy_pass http://192.168.1.1;
}
}

如果客户端使用http://www.myweb.name/server发起请求，该请求被配置中的location块进行处理，由于proxy_pass指令的URL变量不包含URI，所以转向的地址为http://192.168.1.1/server。

server {
listen 80;
server_name www.myweb.com;
location /server/ {
proxy_pass http://192.168.1.1/loc/;
}
}

在该配置实例中，proxy_pass指令的URL包含了"/loc"。如果客户端使用http://www.myweb.name/server发送请求，Nginx将会把请求转向http://192.168.1.1/loc/。

proxy_hide_header指令：

该指令用于设置Nginx服务器在发送Http相应时，隐藏的头域信息。其语法结构为：

proxy_hide_header field;

其中field是需要隐藏的头域信息，该指令可以配置在http块、server块或者location块中。

proxy_pass_header指令：

默认情况下，Nginx服务器在发送相应报文时，报文头中不会包含"Date"、“Server”、“X-Accel”等来自被代理服务器的头域信息。该指令可以设置这些头域信息已被发送，其语法结构如下：

proxy_pass_header field;

其中field是头域信息，该指令可以配置在http块、server块或者location块中。

proxy_set_header指令：

指令可以更改Nginx服务器接收到的客户端请求的请求头信息，然后将新的请求头发送给被代理服务器。其语法如下：

proxy_set_header field value;

默认情况下，该指令是这样设置的：

proxy_set_header Host $proxy_host;

Nginx配置SSL：

格式说明：

首先 Nginx 使用的证书是 .pem 格式的。什么是 .pem 格式，就是以 -----BEGIN xxx----- 开头的文件，如：

-----BEGIN CERTIFICATE-----
MIID6jCCAtKgAwIBAgIBFDANBgkqhkiG9w0BAQsFADB7MQswCQYDVQQGEwJDTjER
MA8GA1UECAwIU2hhbmdoYWkxDzANBgNVBAoMBmRlZXB6ejEPMA0GA1UECwwGZGVl
cHp6MRMwEQYDVQQDDApkZWVwenouY29tMSIwIAYJKoZIhvcNAQkBFhNkZWVwenou
... ...
-----END CERTIFICATE-----

当然现在 openssl 新版签发的证书，在 -----BEGIN xxx----- 之前还有一段信息，我们这里就不举例了。

所以，当我们从证书服务商那里下载证书的时候需要注意证书的格式问题。选择 Nginx 或 SLB 进行下载。

拿到证书后，你可能有如下文件：

example.com.crt
example.com.key

example.com.key 就是你的私钥文件，千万不要泄漏给别人哦。

example.com.crt 是你的证书文件，也有可能是证书链文件。用文本编辑器打开，你可能会看到两张上面提到的内容，它的内容是 站点证书+CA中间证书。我们需要的就是这样的证书链文件。如果不是，请联系证书服务商或到这里补全证书链。

安装证书：

首先，我们需要将我们的证书和私钥上传的服务器的指定路径，假设为 /path/to/ 目录。

然后，编辑你的 Nginx 的 web 服务器的配置文件。在文件内添加如下：

server {  
    # 监听 ssl 443 端口
    listen 443 ssl;
    server_name example.com;

    # 开启 ssl
    ssl on;
    # 指定 ssl 证书路径
    ssl_certificate /path/to/example.com.crt;
    # 指定私钥文件路径
    ssl_certificate_key /path/to/example.com.key;
}

这样，配置文件已经改好了，通过下列命令重启：

$ ./sbin -s stop & ./sbin/nginx

ssl配置报错问题解决：

重启时可能会报如下错误：

nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:37

这是因为我们在编译安装Nginx时没有配置ngx_http_ssl_module模块，我们需要重新安装一次Nginx，在解压目录中执行如下命令生成：

./configure --prefix=/Nginx --with-http_ssl_module

然后执行make install命令重新安装即可，注意此操作会覆盖目标目录，如有需要请备份原文件。安装好后重新配置nginx ssl即可。

默认重定向至HTTPS：

下列两种方式是将HTTP重定向至HTTPS，安装根据情况进行选择：

1. 将每个站点的HTTP重定向到HTTPS：

要将单个网站重定向到HTTPS，请打开域配置文件并进行以下更改：

server {
    listen 80;
    listen [::]:80;
    server_name myfreax.com www.myfreax.com;
    return 301 https://myfreax.com$request_uri;
}

让我们逐行细分代码：

listen 80-服务器块将侦听端口80上指定域的传入连接。
server_name myfreax.com www.myfreax.com -指定服务器块的域名。确保将其替换为您的域名。
return 301 https://myfreax.com$request_uri -将流量重定向到网站的HTTPS版本。 $request_uri变量是包含参数的完整原始请求URI。

通常，您还希望将站点的HTTPS www版本重定向到非www或反之。推荐的重定向方法是为www和非www版本创建一个单独的服务器块。

例如，要将HTTPS www请求重定向到非www，请使用以下配置：

server {
    listen 80;
    listen [::]:80;
    server_name myfreax.com www.myfreax.com;
    return 301 https://myfreax.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name www.myfreax.com;

    # . . . other code

    return 301 https://myfreax.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name myfreax.com;

    # . . . other code
}

2. 将所有站点重定向到HTTPS：

如果服务器上托管的所有网站都配置为使用HTTPS，并且您不想为每个网站创建单独的HTTP服务器块，则可以创建一个通用的HTTP服务器块。该块会将所有HTTP请求重定向到适当的HTTPS块。

要创建一个通用的HTTP块，它将访问者重定向到站点的HTTPS版本，请打开Nginx配置文件并进行以下更改：

server {
	listen 80 default_server;
	listen [::]:80 default_server;
	server_name _;
	return 301 https://$host$request_uri;
}

让我们逐行分析代码：

listen 80 default_server-将此服务器块设置为所有不匹配域的默认（全部捕获）块。
server_name _ -_是一个无效域名，从未与任何真实域名匹配。
return 301 https://$host$request_uri -使用状态代码301（永久移动）将流量重定向到相应的HTTPS服务器块。 $host变量保存请求的域名。

例如，如果访问者在浏览器中打开http://example.com/page2，则Nginx会将请求重定向到https://example.com/page2。

如果可能，最好在每个域的基础上创建重定向，而不是从全局HTTP到HTTPS重定向。

下载地址

Nginx下载传送门：Nginx Stable Version Download

注意事项：下载之后，记得解压到全英文路径，避免中文路径导致Nginx启动失败。

修改配置

打开nginx.conf ，清空配置项，然后将下面的配置信息原封不动拷贝进去：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #前端页面服务器
    server {
        #监听端口和域名
        listen       7000; 
        server_name  localhost;

        #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #添加拦截路径和代理地址
        location /api/ {              
               proxy_pass http://localhost:8080/;  #注意：使用代理地址时末尾记得加上斜杠"/"。      
        }
        
        #添加拦截路径和根目录
        location / {
               root   html/hehe;  #注意：使用"/"拦截全路径的时候记得放在最后。
               index  index.html index.htm;  #index表示首页 
        }           
        
    }
}

快速启动

在Windows 环境中：

快速启动Nginx：右键管理员模式，运行nginx.exe。
快速关闭Nginx：在nginx主目录，添加关闭Nginx的命令。

其中结束Nginx.bat的具体内容如下：

taskkill /f /im nginx.exe

二. 部署前端页面

前后端分离后，可以直接将静态资源（例如前端页面）部署到Nginx的html目录。这里我们在$nginx_home/html目录下创建一个名为hehe的文件夹，并添加一个页面（index.html）用于跨域访问测试，index页面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Page Index</title>
</head>
<body>
<h2>前台系统7000</h2>
<p id="info1"></p>
<p id="info2"></p>
</body>

<script src="js/jquery.js"></script>
<script>
        $.ajax({
            url: 'http://localhost:7000/api/user/login/verifyCode',
            type: "POST",
            success: function (data) {
                //1.获取验证码
                $("#info1").html("跨域访问成功:verifyCode:" + data);
                //2.核对验证码
                $.ajax({
                    url: 'http://localhost:7000/api/user/login/checkVerifyCode',
                    type: "POST",
                    success: function (data) {
                        $("#info2").html("跨域访问成功:checkVerifyCode:" + data);
                    }
                });
            },
            error: function (data) {
                $("#info1").html("跨域失败!!");
            }
        });
</script>

</html>

三. 启动后端系统

首先在POM文件添加Web依赖，然后编写控制层，提供对外的访问接口。默认启动端口是8080.

package com.hehe;

@SpringBootApplication
@RestController
@RequestMapping("/user/login/*")
public class SpringBootNginxApplication {
    //在拦截器打印访问URL
    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                registry.addInterceptor(new HandlerInterceptor() {
                    @Override
                    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {
                        if(response.getStatus()/100>=4){
                            System.err.println("访问URL:"+request.getAttribute(WebUtils.ERROR_REQUEST_URI_ATTRIBUTE));
                        }else {
                            System.out.println("访问URL:"+request.getRequestURI());
                        }
                    }
                });
            }
        };
    }


    //提供验证码
    @RequestMapping("verifyCode")
    public String verifyCode(HttpServletRequest request) {
        request.getSession().setAttribute("verifyCode", "N7GX");
        return request.getSession().getId() + ":" + request.getSession().getAttribute("verifyCode");
    }

    //核对验证码
    @RequestMapping("checkVerifyCode")
    public String checkVerifyCode(HttpServletRequest request) {
        return request.getSession().getId() + ":" + request.getSession().getAttribute("verifyCode");
    }

    public static void main(String[] args) {
        SpringApplication.run(SpringBootNginxApplication.class, args);
    }
}

四. 测试跨域访问

打开浏览器，访问 http://localhost:7000/api/user/login/verifyCode ，可以看到后台获取的Session和第一次生成的验证码。

打开浏览器，访问 http://localhost:7000/api/user/login/checkVerifyCode ，可以看到后台获取的Session和第二次取出的验证码。

由上图可以看到，跨域访问成功，并且Session没有丢失。

五. Nginx跨域总结

Nginx VS CORS

简单来说，Nginx是间接跨域，而CORS则实现了直接跨域。Nginx的反向代理“欺诈了”浏览器，所以浏览器和服务器都认为是同源访问，所以Session不会丢失。（PS：如果发生跨域访问，服务器会每次都创建新的Session，所以才造成了前后端分离的Session丢失问题。）至于CORS这种跨域机制的安全性和灵活性更高，但需要自己解决跨域访问Session丢失的问题，通常情况可以采用Session+Redis来实现Session共享。）

Nginx跨域实现过程:

第1步：http://localhost:7000/index.html
第2步：http://localhost:7000/api/user/login/verifyCode

第1步是打开页面，第2步是在这个页面发起AJAX请求，并且请求的域名端口均与当前访问页面相同，属于同源操作，所以浏览器不会报出跨域禁止的错误。

第3步：http://localhost:8080/user/login/verifyCode

第3步是本案例最为关键的一步，真正的跨域操作由Nginx的proxy_pass进行完成，并成功将验证码信息以代理的身份返回给浏览器，让浏览器处于同源访问后台的错觉。打开F12可以看到代理服务器：

关于proxy_pass 斜杠"/' 的坑

通常情况下，建议大家在代理地址末尾加上"/" ，表示转发后就是proxy_pass直接拼接映射路径。

Nginx代理效果：
转发前URL：http://localhost:7000/api/user/login/verifyCode
转发后URL：http://localhost:8080/hehe/user/login/verifyCode

     server {
        listen       7000; 
        server_name  localhost;
        
        #正确示范: 末尾加斜杠"/"
        location /api/ {              
               proxy_pass http://localhost:8080/hehe/; 
        }
                    
    }

如果代理地址末尾没有加斜杠的话，表示转发后也是proxy_pass直接拼接映射路径，但是，拼接的时候会少了个"/"，这样会引发访问路径错误。

Nginx代理效果：
转发前URL：http://localhost:7000/api/user/login/verifyCode
转发后URL：http://localhost:8080/heheuser/login/verifyCode

     server {
        listen       7000; 
        server_name  localhost;
        
        #错误示范: 末尾无斜杠
        location /api/ {              
               proxy_pass http://localhost:8080/hehe; 
        }
                    
    }

为了更方便大家，看到在Nginx调整了proxy_pass有无斜杠的区别，楼主在控制台打印了每次请求访问的URL地址，这样更加清晰：

具体做法：关闭Nginx 将代理地址修改为：proxy_pass http://localhost:8080/hehe ，然后启动Nginx，在浏览器访问http://localhost:7000/api/user/login/verifyCode，然后查看控制台打印的URL信息。清楚的看到了因为少了斜杠而导致拼接成错误路径，如下：

六. 文档资料

源码地址：SpringBoot+Nginx （PS：内附本案例使用的完整Nginx ）

SpringBoot 实现前后端分离的跨域访问（Nginx） - 简书

xds@松哥

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot 实现前后端分离的跨域访问（Nginx）

序言：使用Nginx反向代理，可以解决跨域无权和Session丢失的问题，十分方便。下面我们以前后端分离为案例，展开Nginx的使用教程。一. 配置和启动Nginx下载地址Nginx下载传送门：Nginx Stable Version Download注意事项：下载之后，记得解压到全英文路径，避免中文路径导致Nginx启动失败。修改配置打开nginx.conf ，清空配置项...
复制链接

扫一扫