XMLHttpRequest错误-“所请求的资源上没有'Access-Control-Allow-Origin'标头。”

Question

我正在使用Angular 2创建应用程序的前端，并且正在尝试使用XMLHttpRequest从第三方站点加载图像。

我的代码如下：

   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'); ，但是无论何时运行此代码，我仍然会收到以下错误：

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.

谁能帮我？

Answer 1

您面临的问题称为CORS， https：//developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS通过提供标头Access-Control-Allow-Origin：*，您将可以访问通过ajax生成图像，但问题是为什么要使用ajax？ 只是使用img标签对不对？

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