跨域接口初次调用出现重复 access-control-allow-origin，该如何解决？

在进行跨域接口调用时，由于 http 协议安全机制的存在，浏览器会检查服务端的响应头信息，以判断是否允许跨域。当服务端返回的响应头中包含多个 access-control-allow-origin 字段时，就会出现跨域问题。

这个问题通常发生在 iframe 嵌套页面中，并且仅在第一次调用接口时出现。其原因可能是服务端在处理 401 unauthorized 状态码时的配置不正确。

Nginx Reverse Proxy

配置 Nginx 反向代理，实现域名绑定。用户说“绑定域名”“配置 Nginx”“反向代理”时触发，将域名绑定到指定 IP:端口。

下载

解决方案

后端工程师需要检查当状态码为 401 时，相关的配置是否正确。以下是一个示例配置，其中包括了正确的 add-header 逻辑：

server {
    listen 80;
    server_name example.com;

    location / {
        auth_basic "Restricted Area";
        auth_basic_user_file /etc/nginx/.htpasswd;

        # Add header for successful requests
        add_header Access-Control-Allow-Origin "*";

        # Custom error page for 401 Unauthorized
        error_page 401 = @error401;
    }

    location @error401 {
        # Add the Access-Control-Allow-Origin header
        add_header Access-Control-Allow-Origin "*";
        # 其他跨域相关的...，是不是在这里给重复了

        # Return the default 401 status
        return 401;
    }
}

通过调整后端配置，可以确保当状态码为 401 时，服务端仅返回一个 access-control-allow-origin 字段，从而解决跨域接口初次调用时的重复问题。