Nginx配置跨越，解决前端跨域CORS问题（简单粗暴）

Nginx解决跨域CORS问题

• • 1. 配置
  • • • 1.1 编辑nginx.config
      • 1.2 解析

---

1. 配置 1.1 编辑nginx.config

这里为完整的nginx.config配置，可直接复制覆盖原来的配置文件

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    
    server {
        listen       8081;
        server_name  localhost;
        location / {
            root   /home/web/dist;
            index  index.html;
        }
    }
    
	server {
        listen       5050;
        server_name  localhost;
		location / {  
              add_header Access-Control-Allow-Origin *;
              add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
              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';
               if ($request_method = 'OPTIONS') {
                return 204;
                }
	         proxy_pass http://localhost:5000;
         } 
    }
}

1.2 解析

• 网页代理

  # 网页代理
   server {
   # 监听的端口
        listen       8081;
        # 监听的地址
        server_name  localhost;
        # 监听的路径 
        location / {
            # 网页资源存放路径
            root   /home/pi/tools/web/map;
            index  index.html;
        }
    }

• 服务器代理（解决跨域）

# 跨域配置
 server {
        // 前端网页请求服务器的代理端口5050
        listen       5050;
         // 后台服务器的地址
        server_name  localhost;
		location / {  
		     // 开放请求头及请求方法
              add_header Access-Control-Allow-Origin *;
              add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
              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';
               // 开放跨域的OPTIONS嗅探请求
               if ($request_method = 'OPTIONS') {
                return 204;
                }
             // 需要代理的服务器的真实端口 5000
	         proxy_pass http://localhost:5000;
         } 
    }

• 访问示例
  服务器启动，监听端口5000
  网页端访问，访问端口5050

如： http://192.168.41.128:5050/get/user