Request.jsがBrowserifyで正しく動作しない

Question

現在、私はjs chrome拡張機能を構築しており、そうするために、いくつかのサイトからデータをスクラップする必要があります。

したがって、this SO questionに基づいて、requestをBrowserifyと使用して達成できることがわかりました。

私はnpmを使用して両方をインストールし、（ターミナルコマンドを実行している権限の理由からが動作していないので、）私のbundle.jsファイルを作成するbrowserify.jsスニペットを作成したので、私は、クライアントで私のブラウザをNode jsrequire年代を実行することができます。

[OK]を、ので、私は最終的にbundle.jsファイルを作成するために管理し、自分のローカルサーバでそれを実行しようとしたが、それは私にCORSエラーを与え続け、所望の応答を返さない：

は、APIを取得ロードできませんhttps://somesite/index.html。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:8080'はアクセスできません。不透明な応答が必要な場合は、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。意図したとおりに

$ node myFileWithRequires.js 

それは、廃棄データを返さ作品：

一つ奇妙なことは、私はnodeを使用して、端末から直接「アンバンドル」ファイルを実行した場合ということです。

私は間違っていますか？ 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が一部のドメインには適用されないように拡張機能を設定できます。クロムエクステンションのドキュメントのRequiesting cross-origin permissionsを参照してください。

あなたはあなたの拡張manifest.jsonにpermissionsフィールドを追加する必要があります。

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

あなたがこすることでしょうドメインわから事前にない場合は、ワイルドカードを使用することができます

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