1、同源策略

同源策略是浏览器的安全策略，限制了不同源的网页之间的访问，协议、域名、端口，任意一个不同即为不同源

2、get请求会触发跨域吗

get请求会触发跨域限制
浏览器地址栏直接发起的get请求不受跨域影响
get请求为简单请求，不会触发cors预检请求
developer.mozilla.org/zh-CN/docs/…

3、图片地址和页面url不同源

当图片地址和页面url不同源时，有两种不同的情况：

加载图片，对于img标签来说，同源策略并不阻止图片的加载，
使用JS操作图片，如果需要进一步操作图片(比如读取这些图片的像素信息)，就会遇到跨域限制，如果资源服务器没有通过CORS策略明确允许可以跨域使用资源，浏览器则会阻止操作，要是不同源的图片资源可以再canvas中进行操作，资源服务器必须配置合适的CORS头，来允许浏览器进行资源请求，且img标签需要配置crossOrigin属性

4、如何解决跨域问题

CORS

服务端配置CORS响应头，明确允许特定来源访问资源

代理

在客户端和目标服务器之间设置一个中间层绕过同源策略，服务器和服务器之间不存在同源策略

正向代理：在客户端设置代理服务器，客户端先请求代理服务器，代理服务器请求目标服务器，目标服务器只知道代理服务器，不知道客户端
反向代理：在目标服务器配置代理服务器，客户端只知道代理服务器，不知道真正的目标服务器

5、postMessage

postMessage可以安全的实现跨源通信

// test1页面
   const msg = {
      name: "test1",
    };
    const open = window.open("http://127.0.0.1:5500/test2.html", "B");
    // setTimeout(()=>{
    //     open.postMessage(msg, "http://127.0.0.1:5500");
    // },1000)

    window.addEventListener("message", (e) => {
      if (e.origin === "http://127.0.0.1:5500") {
        open.postMessage(msg, "http://127.0.0.1:5500");
      }
    });
    // 此处你或许会感到疑问，为什么要在setTimeout里调用postMessage 
    // 因为调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。 
    //（实际加载这个URL的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行） 
    // 此处不用setTimeout就会出现B页面还没有打开，消息就已经发送，导致B无法收到消息 
    // 当然setTimeout并不是一个好方法，此处只是为了方便演示

// test2页面
 const msg = {
      name: "test2",
    };
    const opener = window.opener;
    opener.postMessage("msg", "http://127.0.0.1:5500");
    window.addEventListener("message", (e) => {
      console.log(e.data);
    });
    // 取代setTimeout解决方案  
    //思路：A页面打开B页面，当B页面加载后，B页面就会postMessage给A页面一个信息，当A页面收到信息之后再postMessage给B页面信息

6、WebSocket

7、BroadcastChannel

同源下不同窗口的通信

8、MessageChannel

同源下页面内部不同组件的双向通信的通道

9、Web Work

独立线程，可以处理耗时长的JS任务

【04.17】 面试题