Implementation of nginx configuration request forwarding not taking effect

Bug Description

When vue is packaged and deployed, it is modified and request forwarding is configured in it, but request forwarding does not take effect, and the request returns status code 404.
The nginx configuration is as follows:

location ~ ^/api(/|$) {
    proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:8081;  #Proxy's IP    expires 24;
}

Reproduction Steps

1. Write a vue project, use npm run build to package it, and place the packaged folder dist in the html directory of nginx.
2. Modify and configure request forwarding.
3. Start nginx service.

Reason

In the local development environment, in order to solve cross-domain problems, modified:

devServer: {
    proxy: {
        '/api': {
	        target: 'http://localhost:8081',
	        changeOrigin: true,
	        pathRewrite: { '^/api': '' },
	        ws: true,
	        secure: false
        }
    }
}

The routing rewrite was done here, and the actual backend access address ishttp://localhost:8081/, and the proxy address configured by nginx ishttp://localhost:8081/api, resulting in a request direction error.

Solution

The routing will be rewrite:

location ~ ^/api(/|$) {
    proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:8081;  #Proxy's IP    # Replace /api with /    rewrite ^/api(.*)$ $1 break;
    expires 24;
}

Normal forwarding, the request returns status code 200.

This is the end of this article about the implementation of nginx configuration request forwarding that does not take effect. For more related nginx request forwarding, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!