前后端单域名同时解决跨域 - nginx 配置项 proxy_pass

项目部署过程中使用单个域名来实现前后端解析

proxy_pass

proxy_pass在nginx中可以将监听的端口代理到内网端口或者其他的地方。

• 最简单的nginx代理

# /etc/nginx/nginx.conf

server {
	listen 80;
	server_name test.com;
	location / {
		proxy_pass http://127.0.0.1:8080;
	}
}

上面就能实现 nginx 将域名 test.com代理到内网的8080端口

匹配路径代理

这有以下几种情况

1. proxy_pass代理的ip后面不加上斜杠，这会将访问域名后面的路径全部加到代理ip的后面

# /etc/nginx/nginx.conf

server {
	listen 80;
	server_name test.com;
	location /api/ {
		proxy_pass http://127.0.0.1:8080;
	}
}

浏览器访问 http://www.test.com/api/kol
实际对应的内网地址 127.0.0.1:8080/api/kol

2. proxy_pass 代理的ip后面加上斜杠，匹配到的后面的地址加到代理ip 的后面

# /etc/nginx/nginx.conf

server {
	listen 80;
	server_name test.com;
	location /api/ {
		proxy_pass http://127.0.0.1:8080/;
	}
}

浏览器访问 http://test.com/api/kol
实际对应的内网地址 127.0.0.1:8080/kol

如果proxy_pass里面的ip不只是简单的ip+端口号，还带有其他的路径，那么也会有上面的两种情况
3. proxy_pass代理的ip后面不加上斜杠

# /etc/nginx/nginx.conf

server {
	listen 80;
	server_name test.com;
	location /api/ {
		proxy_pass http://127.0.0.1:8080/admin;
	}
}

浏览器访问 http://www.test.com/api/kol
实际对应的内网地址 127.0.0.1:8080/adminkol

4. proxy_pass代理的ip后面不加上斜杠

# /etc/nginx/nginx.conf

server {
	listen 80;
	server_name test.com;
	location /api/ {
		proxy_pass http://127.0.0.1:8080/admin/;
	}
}

浏览器访问 http://test.com/api/kol
实际对应的内网地址 127.0.0.1:8080/admin/kol

如何实现前后端使用单域名

这里以vue项目打包好单静态文件为例子

1. 前端调用接口域名后面加一个标示， 如 /api
2. 配置nginx

server {
	listen 80;
	server_name test.com;
	location /api/ {
		proxy_pass http://127.0.0.1:8080/; # 后端服务单端口地址
	}
	# 前端入口文件位置
	location / {
		root /home/project/test/dist/;
		index index.html;
	}
}