1. 程式人生 > >利用Nginx解決前後端分離專案中的跨域問題

利用Nginx解決前後端分離專案中的跨域問題

1. 前端專案利用Nginx配置站點

server {
	listen 8092 default_server;
	listen [::]:8092 default_server;

	root /home/chenpeng/xiahuaida/data/vue;
	index index.html index.htm index.nginx-debian.html;

	server_name _;
    
    #請求介面為http://192.168.140.243:8092/api/crawler/login/login,該介面會轉發到http://127.0.0.1:8093/crawler/login/login
    location /api/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:8093/;
	}
    
    #Vue專案的請求http://192.168.140.243:8092/#/login 
    #Vue專案請求是以/#/開頭   
    location /#/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_pass  http://localhost:8092/;
    }
}

2. 後端專案配置訪問站點為:

192.168.140.243:8093