Implementation method of using Nginx to implement resource proxy and interface proxy

Preface

In web development and deployment, we often need to use Nginx to implement interface proxy and static resource proxy to solve cross-domain, unified entry, permission control or performance optimization problems. This guide will provide a comprehensive introduction to the implementation methods of Nginx resource proxy and interface proxy, and will deeply analyze the differences and best practices of proxy_set_header Host configuration.

In modern architectures with separation of front and back ends, front-end pages often need to access back-end services with multiple different domain names, or reference external static resources. If requested directly, cross-domain problems will arise or are inconvenient for unified management. At this point, implementing a proxy using Nginx is an elegant solution.

1. The difference between resource agent and interface agent

2. Examples of application scenarios

1. Resource Agent Scenario:

   Front-end projects need to introduce third-party editor plug-ins, such as fromJS/CSS file. However, for homologous strategy or filing reasons, I hope to transfer through Nginx.

2. Interface proxy scenario:

   Front-end call/api/user/infoThe actual request should be forwarded to/user/info, avoid cross-domain issues or hiding the real backend address.

3. Resource Agent Configuration

• Sample Target

  Will request:

/proxy/res/plugin/editor/

• Agent to:

/res/plugin/editor/

• Nginx configuration example

server {
    listen 443 ssl;
    server_name ;

    ssl_certificate     /etc/nginx/ssl/;
    ssl_certificate_key /etc/nginx/ssl/;

    location /proxy/res/plugin/editor/ {
        proxy_pass /res/plugin/editor/;
        proxy_set_header Host ;  # Stay consistent with the target and avoid some resource verification failures        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

• Note: / is retained at the end of proxy_pass to ensure that the path is spliced ​​correctly.

4. Interface proxy configuration

• Sample Target

  Will request:

/api/user/info

• Agent to:

/user/info

• Nginx configuration example

	location /api/ {
    proxy_pass /;
    proxy_set_header Host $host;  # Keep the front-end original Host header for permission verification or log tracking    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

• Note: If proxy_pass is followed by /, the matching path will be directly cut off /api/, thereby /api/user/info → /user/info.

5. Description of the settings difference of proxy_set_header Host

6. Troubleshooting of FAQs

1. Resource cannot load, return 403/404?

   • Is the proxy_pass written incorrectly? Is / missing at the end?

   • Does the target resource server verify Host? Try proxy_set_header Host xxx.

   • Is the URL splicing correct? You can check locally via curl -v.

2. Cross-domain problem (CORS)?

   • Nginx is not a universal solution and requires the target service to support CORS;

   • If the target backend is uncontrollable, Nginx can add response headers:

location /api/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    add_header Access-Control-Allow-Headers *;
    proxy_pass /;
}

• Note: It is recommended to use whitelists in production environments to avoid access to any source.

7. Safety suggestions and optimization

• Limited access sources

allow 10.0.0.0/8;
deny all;

• Turn on cache to improve performance (resource proxy)

proxy_cache_path /tmp/nginx_cache levels=1:2 keys_zone=res_cache:10m inactive=1h max_size=1g;

location /proxy/res/ {
    proxy_cache res_cache;
    proxy_pass /res/;
}

• Unified interface prefix managementuse/api/Route prefix divides interfaces to avoid front-end and back-end path conflicts.

8. Summary

The above is the detailed content of the implementation method of using Nginx to implement resource proxy and interface proxy. For more information about Nginx resource proxy and interface proxy, please pay attention to my other related articles!