使用nginx解决前后端跨域问题

在前后端分离的项目里，一般都会遇到前后端跨域的问题。
之所以出现这个问题，网上有很多，这里就不再赘述了。
实现的方法也有不少，比如在后端spring boot的config文件中重写addCostMappings方法以达到跨域。或者在前端vue中创建一个vue.config.js文件实现跨域。这里重点采用的是使用nginx的反向代理的方式实现跨域。

反向代理

首先说说反向代理。用户与服务器之间的ip地址，协议，端口号有一项不同都是跨域。而nginx的反向代理便是解决这个跨域问题。

如图所示，用户通过访问nginx的反向代理服务器，通过nginx服务器的中介来访问tomcat服务器以达到跨域的方式。

主要配置

找到自己前后端的ip地址

我的项目采用的是vue+spring boot的方式，都是在win10系统中。打开cmd输入指令

ipconfig

找到自己的ip地址，如我的就是 192.168.2.226。
vue项目的服务器端口一般是8080端口，后端spring boot在yml文件中修改端口为8181.

找到nginx服务器的ip地址

在自己的开发过程中，配置服务器需要自己的IP地址。在里的nginx服务器是在vmware虚拟器中配置的。通过终端命令

ifconfig

查找虚拟机的IP地址。比如我的虚拟机的地址就是 192.168.2.223
nginx的默认端口为80端口，这个可以根据实际的情况进行更改。

有些这些准备工作之后便可以进行nginx的配置了。

配置nginx

找到nginx的配置文件。 在 /usr/local/nginx/conf的文件下。
打开配置文件nginx.conf

# 在server块中配置监听的端口以及nginx的IP地址

 server {
        listen       80;# 根据实际情况进行修改
        server_name  192.168.2.223;# 自己nginx服务器的ip地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

在local块中添加映射规则

location / {
            add_header Access-Control-Allow-Origin *;# tage1
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';# tage2
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# tage3

         if ($request_method = 'OPTIONS') {# tage4
                 return 204;
         }
            root   html;
            proxy_pass  http://192.168.2.226:8181;# 自己后端服务器的ip地址与端口
            index  index.html index.htm;
        }

以上便将nginx的跨域问题配置好了。需要进行修改的地方，在后面都进行注释了。

tage注释

在网上看到许多配置nginx服务器的反向代理的是只配置一个

proxy_pass  http://ip与端口;

这样的配置也可以达到跨域的目的，但是只能访问静态文件，不能访问接口。
但是加上这三个配置之后

	   	    add_header Access-Control-Allow-Origin *;# tage1
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';# tage2
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# tage3

他只能发送get请求，一旦发送post请求会报错
报错信息为：

Response to preflight request doesn't pass access control check:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.

需要添加上tage4的一个判断条件，这个是浏览器在判断是否允许跨域请求时发送的options请求。

  if ($request_method = 'OPTIONS') {# tage4
                 return 204;
         }