Fehler mit XMLHttpRequest - "Kein 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden."

Question

Ich erstelle das Frontend einer Anwendung mit Angular 2 und ich versuche, ein Bild von einer Website von Drittanbietern mit XMLHttpRequest zu laden.

Mein Code ist unten:

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

Und das ist der Code, den ich verwende zu testen:

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

Ich habe um das Internet geschaut und mehrere Seiten gesagt, dass ich sollte fügen Sie image/jpeg zu meinen Überschriften hinzu, also tat ich es unter Verwendung dieses: request.setRequestHeader('Accept', 'image/jpeg');, jedoch erhalte ich noch den Fehler unten, wann immer ich diesen Code laufen lasse:

XMLHttpRequest cannot load http://adsoftheworld.com/files/steve-jobs.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9876' is therefore not allowed access. 

Kann mir jemand helfen?

Answer 1

Das Problem Sie konfrontiert sind, ist CORS genannt, https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS Indem Header Access-Control-Allow-Origin: *, werden Sie in der Lage sein, das Bild durch Ajax zugreifen, aber die Frage ist, Ajax, warum? benutze einfach img tag richtig?

<img src="http://adsoftheworld.com/files/steve-jobs.jpg"/>