iframe的基本使用及利用nginx解决iframe跨域

一.场景

在前端大屏页面中，用iframe嵌套了手机模拟器，手机模拟器进入某个页面，这个页面调用接口实现单点登录

前端大屏地址：https://域名1:7443/1.html    通过nginx访问的页面

 

不可以调用成功接口的手机端地址：https://域名1/st_app/zlj_homepage/tourists_ys.html?utype=999

前端报错：404，具有迷惑性，其实就是跨域了

二.解决方式

可以调用成功接口的手机端地址：https://域名1:7443/st_app/zlj_homepage/tourists_ys.html?utype=999

三.iframe基本使用

直接打开百度：f12-》元素-》以html格式修改-》写入代码

<iframe src="https://www.baidu.com/?tn=85070231_7_hao_pg" width="900" heigth="900"></iframe>

 

 

 

四、为什么会出现跨域问题出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

五、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）

六、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

七.nginx配置解决跨域

#user  nobody;
worker_processes  3;

#debug | info | notice | warn | error | crit
error_log  logs/error.log  warn;

pid        logs/nginx.pid;

#worker_rlimit_nofile 65535;


events {
    worker_connections  8192;
}

http {
    include       mime.types;
    
    default_type  application/octet-stream;

    fastcgi_intercept_errors on; 
    
    log_format  main  '"$upstream_addr" $remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
    access_log off;
    open_log_file_cache max=1000 inactive=20s min_uses=2 valid=1m;

    server_names_hash_bucket_size 128;

    large_client_header_buffers 4 64k;
    
    client_header_buffer_size 32k;
    
    client_body_buffer_size    5120k;
    
    client_max_body_size    100m;

    server_tokens off;
    
    ignore_invalid_headers   on;
    

    recursive_error_pages    on;

    server_name_in_redirect off;

    sendfile  on;

    tcp_nopush  on;

    tcp_nodelay    on;

    keepalive_requests 3000;
    
    keepalive_timeout  120;

   client_body_timeout 12;
   client_header_timeout 12;
   send_timeout 10;
   
    autoindex off; 
    
    include    gzip.conf;

    map_hash_bucket_size 64;

    #FastCGI相关参数是为了改善网站的性能：减少资源占用，提高访问速度。下面参数看字面意思都能理解。
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 128k;
    fastcgi_buffers 8 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k;
    
   upstream st_app {
      ip_hash;  
      server 127.0.0.1:443  weight=1 max_fails=10 fail_timeout=120s;
    }
    
    upstream zlj_jhpt {
      ip_hash;  
      server IP:443 weight=1 max_fails=10 fail_timeout=120s;
      server IP:6443  weight=1 max_fails=10 fail_timeout=120s;
      #server IP:8080  weight=1 max_fails=10 fail_timeout=120s;    
      keepalive 64;
    }

    
    server {
    listen 8998 default;
    location / {
            root   error;
            index  index.html index.htm;
    }
    }
    
    server {
    
    listen       7443 ssl;
    server_name  域名1:7443;
    ssl_certificate       D:XXX;
    ssl_certificate_key   D:XXX;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    #ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers  on;

    charset ISO-88509-1;

    
        location /st_app {
        proxy_pass https://st_app;
        include    proxy.conf;
        # 配置html以文件方式打开
        if ($request_method = 'POST') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
        if ($request_method = 'GET') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
    }
    
    
    
    location /st {
        proxy_pass https://st;
        include    proxy.conf;
        # 配置html以文件方式打开
        if ($request_method = 'POST') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
        if ($request_method = 'GET') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
    }
        
    }    
    
}