Nginx跨域代理解决方案

  1. 1. Nginx
  2. 2. 前端代理配置

Nginx 反向代理 和 前端代理处理跨域

Nginx

  • 页面请求访问本地1026端口
  • /server/api/打头的请求是ajax请求，访问本地1027端口
  • /socket.io/打头的是socket.io连接，需特别处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
server {
	listen 1026 default_server;
	listen [::]:1026 default_server;
	
	root /home/oal/Work/oal/dist;
	index index.html index.htm index.nginx-debian.html;
	server_name _;
	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to index.html.
        try_files $uri $uri/ /index.html;
	}
    location /training/ {
        # proxy training apis
        proxy_pass http://serverip:1029/;
    }
    location /socket.io/ {
        # proxy socket.io
    	proxy_pass http://serverip:1029/socket.io/;
    	proxy_redirect off;
    
    	proxy_set_header X-Real-IP $remote_addr;
    	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	proxy_set_header Host $http_host;
    	proxy_set_header X-NginX-Proxy false;
    
    	proxy_http_version 1.1;
    	proxy_set_header Upgrade $http_upgrade;
    	proxy_set_header Connection "upgrade";
    }
}

前端代理配置

  • /server/api/打头的请求是ajax请求，需要pathRewrite，访问开发环境服务器

  • /socket.io/ 不需要需要pathRewrite

  • config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
proxy: {
  '/server/api/': {
    target: 'http://serverip:1027/', // 开发环境
    changeOrigin: true,
    pathRewrite: {
      '^/server/api/': '',
    },
  },
  '/socket.io/': {
    target: 'http://serverip:1027/', // 开发环境
    changeOrigin: true,
  },
},
nginx