javascript - XMLHttpRequest 错误 - "No ' Access-Control-Allow-Origin' header 出现在请求的资源上。”

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 添加到我的 header 中，所以我使用了以下方法: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通过提供 header Access-Control-Allow-Origin:*，您将能够通过 ajax 访问图像，但问题是为什么要使用 ajax？只需使用 img 标签就可以了吗？

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