Question

我目前正在构建一个js chrome扩展程序，为此，我需要从某些网站中删除数据。

所以，基于this SO question，我发现我可以使用request Browserify来实现这一目标。

我使用npm安装了两个并创建了browserify.js代码段来创建我的bundle.js文件（，因为出于权限原因，运行终端命令无效），所以我可以在客户端，我的浏览器中运行Node js require。

好的，所以我终于设法创建了bundle.js文件，并尝试在我的本地服务器上运行它，但它一直给我CORS错误并且没有返回所需的响应：

Fetch API无法加载https://somesite/index.html。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此不允许访问。如果不透明的回复符合您的需求，请将请求的模式设置为“无人”状态。在禁用CORS的情况下获取资源。

一个奇怪的事情是，如果我运行＆＃34; unbundled＆＃34;使用node直接从终端提交文件：

$ node myFileWithRequires.js

按预期工作，返回报废数据。

我做错了什么？如何使用request和browserify？

在客户端中废弃数据

CODE：

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.
      });

Answer 1

默认情况下，XHR和fetch请求受CORS绑定，这意味着他们无法访问其他域上的资源，除非这些域将“来源”列入白名单。（当前页面的域名）。浏览器中的request使用XHR，因此它也受CORS约束。

在Chrome扩展程序中，它有点不同 - 您可以配置您的扩展程序，以便CORS不适用于某些域。请参阅chrome扩展程序文档中的Requiesting cross-origin permissions。

您需要在扩展程序permissions中添加manifest.json字段：

{
  "permissions": [
    "http://www.google.com/"
  ]
}

如果您事先不确定要抓取的域名，可以使用通配符：

{
  "permissions": [
    "http://*/",
    "https://*/"
  ]
}

使用Browserify

1 个答案: