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';
        }
    }
        
    }    
    
}