nginx 解决外链跨域问题

Nginx 用来解决外链跨域问题主要是通过配置反向代理和设置适当的 CORS 头部来实现的。当您的前端应用试图从一个不同于其自身的源（即外链）获取数据时，会出现跨域问题。Nginx 可以作为一个中间层，接收前端应用的请求，然后转发到外部服务，并在响应时添加允许跨域的头部信息，从而使浏览器接受跨域的响应。

方案一：反向代理

假设您有一个前端应用托管在 http://example.com，而您需要访问的外链 API 在 http://external-api.com。您可以配置 Nginx 如下：

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://external-api.com/;
        proxy_set_header Host $host;
        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;

        # 如果外链API需要身份验证或其他特定头部，也要传递它们
        # proxy_set_header Authorization $http_authorization;
    }
}

在这个配置中，前端应用现在可以像访问自己服务器的接口一样访问 /api/，Nginx会将这些请求透明地转发到外部API，由于请求始终在 example.com 的上下文中，因此不会触发跨域限制。

方案二：设置 CORS 头部

如果只是希望对外部资源进行简单的 GET 请求，并且不想或不能使用反向代理，可以直接在Nginx上配置CORS头部：

server {
    listen 80;
    server_name example.com;

    location / {
        # ... 其他配置 ...

        # 设置允许跨域的响应头
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://your-front-end-domain.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' 'https://your-front-end-domain.com';
        }

        # ... 更多配置 ...
    }
}

这里的配置允许来自指定前端域名 (https://your-front-end-domain.com) 的 GET 请求跨域访问，同时处理了预检（OPTIONS）请求。注意，这种方法适用于那些您不能或不想改变外链API服务器设置的情况，但需要注意的是，这要求外链API在接收到带有适当CORS头部的请求时，能返回同样带有正确CORS头部的响应。

在实际应用中，选择哪种方案取决于您的具体需求和对安全性的考虑。推荐优先采用反向代理方式，因为它提供了更大的控制性和安全性。