跨域

浏览器的同源策略

跨域方案

图片探测

img.src = url + '?t=' + new Date().getTime();

本地服务器代理

// 以vite为例
export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      }
    }
  }
})

反向代理

1. 对反向代理服务器使用CORS，这种方法本质上仍然是CORS方法，但是它的意义在于设置好反向代理的跨域资源共享(CORS)后，所有目标服务器不用再做任何处理，只需要设置好反向代理即可。

2. 利用反向代理将后端接口代理到与网站的同源路径下。

JSONP

1. 首先定义好回调函数，后端的数据作为回调函数的参数。

2. 动态创建script标签请求后端接口

3. 后端返回回调执行语句，并将数据作为参数传过来。

// 服务器 nodejs
const http = require("http");
const server = http
  .createServer((req, res) => {
		const data = 123 // 取数据
    res.end(`cb(${data})`);  // 数据作为参数
  })
  .listen("3333");
// 浏览器
<script>
		// 定义好回调函数，后端数据会当做参数传入
    function cb(data) {
      console.log(`data是${data}`);
    }
    const scr = document.createElement("script");
    scr.setAttribute("src", "http://localhost:3333");
    document.documentElement.appendChild(scr);
</script>

跨源资源共享(CORS)

• 使用下列方法之一：
• GET
• HEAD
• POST

• 除了被用户代理自动设置的首部字段（例如 Connection，User-Agent）和在 Fetch 规范中定义为 禁用首部名称 的其他首部，允许人为设置的字段为 Fetch 规范定义的 对 CORS 安全的首部字段集合。该集合为：
• Accept
• Accept-Language
• Content-Language
• Content-Type（需要注意额外的限制）

• Content-Type 的值仅限于下列三者之一：
• text/plain
• multipart/form-data
• application/x-www-form-urlencoded

• 请求中的任意 XMLHttpRequest 对象均没有注册任何事件监听器；XMLHttpRequest 对象可以使用 XMLHttpRequest.upload 属性访问。

• 请求中没有使用 ReadableStream 对象。

// 服务器
const http = require("http");
const server = http
  .createServer((req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.end("123");
  })
  .listen("3333", () => {
    console.log("port 3333");
  });
// 客户端
<script>
    const xhr = new XMLHttpRequest();
    const url = "http://localhost:3333/";
    xhr.open("GET", url);
    xhr.send();
</script>

// 客户端
<script>
    const xhr = new XMLHttpRequest();
    const url = "http://localhost:3333/";
    xhr.open("GET", url);
    xhr.setRequestHeader("Authorization", "123");
    xhr.setRequestHeader("a", "111");
    xhr.send();
</script>
// 服务器
const http = require("http");
const server = http
  .createServer((req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", " POST, GET, OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", "a,authorization");
    res.end("123");
  })
  .listen("3333", () => {
    console.log("port 3333");
  });

1. Access-Control-Allow-Credentials: true

2. Access-Control-Allow-Origin 的值不能是*

// 客户端
<script>
    const xhr = new XMLHttpRequest();
    const url = "http://localhost:3333/";
    xhr.open("GET", url);
    xhr.setRequestHeader("Authorization", "123");
    xhr.withCredentials = true;
    xhr.send();
</script>
// 服务器
const http = require("http");
const server = http
  .createServer((req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    res.setHeader("Access-Control-Allow-Methods", " POST, GET, OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", "a,authorization");
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.end("123");
  })
  .listen("3333", () => {
    console.log("port 3333");
  });

document.domain

注意： 目前几乎所有主流浏览器都支持此特性，但是未来可能会被废弃。

PostMessage

// http://127.0.0.1:5500/a1.html
<script>
    const w1 = window.open("http://127.0.0.1:5500/a2.html");
    setTimeout(() => {
			// 避免a2页面还没加载完成就发送消息
      w1.postMessage("123", "http://127.0.0.1:5500/a2.html");
    }, 1000);
</script>

// http://127.0.0.1:5500/a2.html
<script>
    window.addEventListener(
      "message",
      function (res) {
        // 确认发送方身份
        if (res.origin === "http://127.0.0.1:5500") {
        }
      },
      false
    );
</script>

注意 如果不需要接收message消息，则应该直接避免监听message消息，如果需要接收message消息，则应当始终使用 origin 和 source 属性验证发件人的身份，防止跨站脚本攻击。