0
私はAngular 2を使用してアプリケーションのフロントエンドを作成していますが、XMLHttpRequestを使用してサードパーティのサイトから画像をロードしようとしています。XMLHttpRequestでエラーが発生しました - "いいえ 'Access-Control-Allow-Origin'ヘッダーが要求されたリソースに存在します。
loadFile(fileUrl) {
const promise = new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('GET', fileUrl, true);
request.setRequestHeader('Accept', 'image/jpeg');
request.onload =() => {
if (request.status === 200) {
resolve(request);
}
else {
reject(Error(request.statusText));
}
};
request.onerror =() => {
reject(Error('Network error.'));
};
request.send();
});
return promise;
}
そして、これは私がそれをテストするために使用していたコードです：
私のコードは以下の通りです私は、インターネットを中心に見てきたし、いくつかのページは、私がすべきことを言っ
import FileHelper from './file-helper';
describe('File Helper',() => {
it('should retrieve the contents of an image on the web', (done) => {
let fileLoadPromise, fileContent;
fileLoadPromise = FileHelper.loadFile('http://adsoftheworld.com/files/steve-jobs.jpg');
fileLoadPromise.then((request: XMLHttpRequest) => {
fileContent = request.responseText;
expect(request.responseType).toEqual('image/jpeg');
done();
}).catch(error => {
console.log(error);
done.fail();
});
expect(fileContent).toBeTruthy();
});
});
image/jpegを私のヘッダーに追加してください：request.setRequestHeader('Accept', 'image/jpeg');しかし、私はこのコードを実行する度に以下のエラーが表示されます：
誰も助けてくれますか？
'adsoftheworld.com'は、ページ上のスクリプトが応答の内容を読み取ることができ、その応答で'アクセス制御 - 許可 - Origin'ヘッダーを提供する必要があります。これは、信頼できないスクリプトが他のサイトの内容を、まともなユーザーがスクリプトを実行しているかのように読み取らないようにするセキュリティメカニズムです。一番きれいな解決策は、サーバー側のプロキシを使用して他のサイトのコンテンツを取得し、Webページと同じ起点のスクリプトに対する応答の内容を提供することです。 – apsillers