Nginx反向代理解决跨域问题（个人学习总结）

一、理解Nginx

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。

反向代理的原理就是：前端的地址和后端的地址用nginx转发到同一个地址下，如8080端口和8081端口都转到8060端口下。

二、Nginx基本命令

以管理员身份运行cmd（注意：可以使用原始的cmd命令行，但是一定不能用Windows PowerShell，会报错）

1. 进入nginx根目录：

cd D:\nginx-1.23.1

2. 启动nginx：

start nginx

3. 重启nginx：

nginx -s reload

4. 停止nginx：

nginx -s stop

5. 测试配置文件格式是否正确：

nginx -t

6. 关闭所有nginx进程：

taskkill /f /fi "imagename eq nginx.exe"

三、产生跨域问题的原因

编写前后端分离的项目时，通常将前端文件和后端服务分别部署到不同的域名上，前端调用后端代码时通常会报错，提示出现跨域问题：

Access to XMLHttpRequest at 'http://127.0.0.1:8080/login' from origin 'http://127.0.0.1:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当前错误信息提示：CORS策略已阻止从源”http://127.0.0.1:8081"访问”http://127.0.0.1:8080/login“处的XMLHttpRequest：请求的资源上不存在'Access Control Allow Origin'标头。

四、配置Nginx解决跨域问题

1.使用vscode打开nginx配置文件：

code D:\nginx-1.23.1\conf\nginx.conf

2.修改配置文件：

#user  nobody;
worker_processes  2; # 进程数

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024; # 最大连接数
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8060; #这里设置的是用户实际访问的地址（http://localhost:8060），不带端口号就是80端口，尽量不要设置成80
        server_name  127.0.0.1; #这里配置好nginx的地址后，前端文件.env.development中应设置 VUE_APP_BASE_API='http://127.0.0.1:8060/api'

############### 跨域配置开始 ###############
        location /api/ { # 这里设的是location /api/，/api/相当于一个自定义的拦截，会讲此location里设置的proxy_pass拦截转发到localhost里。可以根据需要灵活修改
            if($request_method = 'OPTIONS'){ #拦截预检测请求
                add_header Access-Control-Allow-Origin $http_origin; #这里尽量不要用* ，会在某些时候报错
                add_header Access-Control-Allow-Credentials true always; #是否携带cookie
                add_header Access-Control-Allow-Methods 'GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS'; # 根据需要灵活修改HTTP请求方法
                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';
                add_header Access-Control-Max-Age 172800; #预检测请求的缓存时间，另外浏览器控制面板的Disable cache不勾选才可生效
                return 200;
            }
            proxy_pass http://localhost:8081/; # 后端域名，注意最后一定要加 /
            #proxy_pass 常用在反向代理，比如nginx代理，node服务，java服务
        }
############### 跨域配置结束 ###############
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

配置好nginx的地址后，前端文件.env.development中应设置

VUE_APP_BASE_API = 'http://127.0.0.1:8060/api'

每次修改完nginx配置，都要重启（执行nginx -s reload命令），才能生效。

到此，配置完成，跨域问题得以解决。