Restful API 請求不支援PUT DELETE請求的解決辦法

前端: vue+axios

後端: nginx+jar包， nginx的80端口做靜态資源和api路由, 如下:

server {
        listen       80;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root D:/software/dzdxyq/resources;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://*.*.*.*:8080/;
		}
}
           

前端的PUT|DELETE請求會報錯，NET_CONNECTRESET 錯誤， 反複檢視nginx的access日志，發現請求根本沒路由進來。各種百度根本沒用。

最後找到了這篇文章: https://blog.csdn.net/youbl/article/details/84647791 感謝！！！

先說下思路， 既然各種配置都不好使，那就來個轉換思想。http請求header中有個擴充屬性X-HTTP-Method-Override， 這個屬性可以由我們自己定義值。

1. 前端發起put請求。

2. 前端将put請求改成post請求，同時設定X-HTTP-Method-Override=put 。

3. nginx收到put請求，取出X-HTTP-Method-Override的值并指派給http的method。

vue axios代碼如下：

// request攔截器
service.interceptors.request.use(
  config => {
    // 是否需要設定 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    if(config.method.toUpperCase() == 'PUT') {
      config.method='POST'
      config.headers['X-HTTP-Method-Override']="PUT"
    }
    if(config.method.toUpperCase() == 'DELETE') {
      config.method='POST'
      config.headers['X-HTTP-Method-Override']="DELETE"
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)
           

nginx配置如下:

server {
        listen       80;
        server_name  localhost;
	
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root D:/software/dzdxyq/resources;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
		
			set $method $request_method;
			if ($http_X_HTTP_Method_Override ~* 'PUT|DELETE') {
				set $method $http_X_HTTP_Method_Override;
			}
			proxy_method $method;
			
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://*.*.*.*:8080/;
		}
		
}