Request.js与Browserify无法正常工作
我目前正在构build一个js chrome扩展,为此,我需要从一些站点中删除数据。
所以,基于这个SO问题,我发现我可以通过使用Browserify 请求来实现这一点 。
我安装了两个使用npm
和创build一个bundle.js
片段创build我的bundle.js
文件( 因为权限的原因,运行terminal命令不起作用 ),所以我可以在客户端,我的浏览器运行Node js
require
。
好的,所以我最终设法创build了bundle.js
文件,并试图在我的本地服务器上运行它,但它一直给我CORS错误,并且不返回所需的响应:
抓取API无法加载https://somesite/index.html 。 请求的资源上没有“Access-Control-Allow-Origin”标题。 原因' http:// localhost:8080 '因此不被允许访问。 如果一个不透明的响应满足您的需求,请将请求的模式设置为“no-cors”来取消禁用CORS的资源。
奇怪的是,如果我使用node
从terminal直接运行“unbundled”文件:
$ node myFileWithRequires.js
它按预期工作,返回报废的数据。
我究竟做错了什么? 我怎样才能使用request
和浏览器在客户端的数据?
码:
myBrowserifySnippet.js
var browserify = require('browserify'); var b = browserify(); b.add('myrequest.js'); const fs = require('fs'); const writable = fs.createWriteStream('bundle.js'); b.bundle().pipe(writable);
myFileWithRequires.js
var request = require('request'); request('http://www.google.com', function (error, response, body) { console.log('error:', error); // Print the error if one occurred console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received console.log('body:', body); // Print the HTML for the Google homepage. });
默认情况下,XHR和fetch
请求由CORS绑定,这意味着除非这些域将“origin”(当前页面的域)列入白名单,否则它们将无法访问其他域上的资源。 在浏览器中request
使用XHR,所以它也被CORS绑定。
在Chrome扩展中,它有点不同 – 您可以configuration您的扩展,以便CORS不适用于某些域。 请参阅chrome扩展文档中的重新授予跨域权限 。
您需要向您的扩展manifest.json
添加permissions
字段:
{ "permissions": [ "http://www.google.com/" ] }
如果您不确定哪个域名可能会被抓取,可以使用通配符:
{ "permissions": [ "http://*/", "https://*/" ] }