puppeteer去掉同源策略及请求拦截

puppeteer是一个基于cdp协议的功能强大的工具，在自动化测试和爬虫方面应用广泛，这里谈一下如何在puppeteer中关掉同源策略和进行请求拦截。

同源策略

同源策略为web 安全提供了有力的保障，但是有时候我们需要在localhost的情况下访问服务器的api，这时就需要去掉同源策略的限制，让http畅通无阻。

chrome的启动是支持很多参数的，其中一个就是来禁用同源策略的。当我们在chrome启动时加入

--disable-web-security

const browser = await puppeteer.launch({
headless: false,
devtools: true,
defaultViewport: {
width: 1280,
height: 720,
},
args: [
'--disable-web-security'
],
});

更多有用的参数可以参考这里.

然后接下来谈谈拦截请求

page.setRequestInterception

可以拦截请求的就是这个方法了。我们来看官方给出的一段代码：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.setRequestInterception(true);

page.on('request', interceptedRequest => {
if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
interceptedRequest.abort();
else
interceptedRequest.continue();
});
await page.goto('https://example.com');
await browser.close();
});

这里，我们首先开启了拦截请求，然后对url以jpg或者png结尾的，调用abort(),使这个请求失败，其他的则继续发到服务器。当然，如果只是这么简单的话，是说明不了这个方法的强大之处的，因为我们还可以直接返回一个响应。举个例子：

await page.setRequestInterception(true);
page.on('request', request => {
request.respond({
status: 404,
contentType: 'text/plain',
body: 'Not Found!'
});
});

对方不想说话，并丢过来一个404。当然，除了404，其他的200，301，500也都是可以的。

还可以在请求过程中''添油加醋''：

request.url() // 读取url
request.headers() // 读取headers
request.postData() // 读取postData
request.method() // 读取postData
request.continue({
url: '',
method: '',
postData: {},
headers: {}
})

你可以在请求过程中替换一些请求的参数，比如把url中的baidu替换成google，改掉postData或者headers里的一些信息，emmm，我忽然有了一个大胆的想法（完）。

参考：
https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pageevaluatehandlepagefunction-args
https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v5.2.1&show=api-requestcontinueoverrides