Nginx 反向代理一个网站后 分配给一个二级域名 跨域不成功

Question

本地有一个网站 www.xxx.com
使用nginx反向代理 并分配一个二级域名为 aaa.xxx.com
单独打开aaa.xxx.com 没问题

现在 www.xxx.com 中的一个页面 使用iframe 嵌套了 aaa.xxx.com
console 显示

Blocked a frame with origin "http://aaa.xxx.com" from accessing a cross-origin frame.

Nginx 配置如下：

server{
        listen 80;
        server_name www.xxx.com;
        index  index.html index.htm;
        root c:/xx/xx/;
} 
        
        
server{
         listen 80;
        server_name aaa.xxx.com;
        
        proxy_hide_header X-Frame-Options;
         add_header X-Frame-Options ALLOWALL;
         add_header Access-Control-Allow-Origin *;
           
        location / {
            proxy_pass 反向代理的网址;
        }
}

请问大佬们，应该怎么配置才能在www.xxx.com 的iframe中跨域成功。
感谢！

Answer 1

首先要了解跨域问题是怎么来的，才能从原理上解决问题；

跨域问题本身不是互联网通讯的问题，也就是 tcp http 这些协议是没有跨域这一说的，之所以会有跨域，就是为了防止我们写个网站，然后恶意嵌入一个 iframe ，可能这个 iframe 是 taobao.com ，然后别人咋看一下真的以为是 taobao , 然后在里面输入帐号密码，而你外层的 js 居然还能访问里面的所有内容，这样就会出现危险，包括你自己写的网站居然还能访问其他网站的 api 接口，这些都可能存在 安全问题。

因此为了根除这些问题的发生，浏览器本身对这些请求进行了拦截，只要你访问的接口或者 iframe 的地址不是来自于同一个域名，就认为你在做恶意的事情，要解决这个问题就是把他们放在同一个域名下，或者利用 nginx 做反向代理转发请求，这样对前端来讲你们就是同一个域名了。

类似以下配置：

server {
    listen      8085;
    server_name 127.0.0.1; 
    charset     utf-8;
    root        /var/www

    # max upload size
    client_max_body_size 75M;

    location ~* /v1.0/{
        rewrite  ^/v1.0/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8080;
    }

    location ~* /v2.0/{
        rewrite  ^/v2.0/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8081;
    }
}

当访问 http://127.0.0.1:8085/v2.0/xxxx 时候会被代理到 8081 端口，怎样浏览器就还是认为你在访问 8085 端口；