跨域问题的背景

Web 应用开发中，跨域问题（CORS）经常阻碍前后端联调，尤其是在本地开发环境下。传统解决方案如代理服务器或修改浏览器安全策略可能复杂且不稳定。

Playwright MCP 的作用

Playwright 的 Multi-Context Page（MCP）功能允许在同一测试环境中创建多个隔离的浏览器上下文，每个上下文可独立配置域名和 Cookie，从而绕过跨域限制。

配置 Playwright 环境

安装 Playwright 并初始化项目：

npm init playwright@latest

在测试脚本中创建多个上下文，模拟不同域名的请求：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context1 = await browser.newContext();
  const context2 = await browser.newContext();
  
  const page1 = await context1.newPage();
  await page1.goto('https://domain-a.com');
  
  const page2 = await context2.newPage();
  await page2.goto('https://domain-b.com');
})();

GitHub Copilot 的辅助

Copilot 可快速生成跨域调试的代码片段。输入注释描述需求，例如：

// 使用 Playwright 模拟跨域请求，绕过 CORS 限制

Copilot 会自动补全上下文配置和请求逻辑，减少手动编码错误。

调试技巧

通过 page.evaluate 注入脚本，直接操作跨域页面的 DOM 或接口：

await page1.evaluate(async () => {
  const response = await fetch('https://domain-b.com/api', { 
    credentials: 'include' 
  });
  return response.json();
});

安全注意事项

确保测试环境与实际生产环境隔离，避免敏感数据泄露。Playwright 的默认配置已禁用危险功能（如自动下载文件），但仍需检查上下文权限。