CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我在 Heroku 上托管的 AngularJS 应用程序不断收到以下错误：

在以下位置访问图像 'https://d15790c7fypqrz.cloudfront.net/attachments/product_template_pictures/images/000/490/265/grid/832816_122.png' 来自 'http://.herokuapp.com' 的来源已被阻止 CORS 策略：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。起源 'http://.herokuapp.com' 因此不是 允许访问。

我该如何解决？这是进行base64转换的代码：

function createBase64Property(product, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(product, dataURL);
  };
  img.src = product.imageUrl;
  if (img.complete || img.complete === undefined) {
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
    img.src = product.imageUrl;
  }
}

我的web.js配置如下：

var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var cors = require('cors')

var app = express();

app.use(morgan('dev'));
app.use(gzippo.staticGzip(__dirname));
app.use(cors({credentials: true, origin: true}));
app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header('Access-Control-Allow-Headers', 'Content-Type');
   next();
});
app.listen(process.env.PORT || 5000);

Answer 1

好的，在这种情况下有一种绕过 CORS 的棘手方法。 如果您的 Angular 代码部署在节点服务器上，您可以代理您的图像 URL。您定义一个由节点处理的自定义路由，该路由将是本地的。

使用 grunt

您需要添加grunt-connect-proxy

https://github.com/drewzboto/grunt-connect-proxy

将其添加到您的 grunt 配置后，您必须编写代理中间件：

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      test: {
        options: {
          port: 9001,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      dist: {
        options: {
          open: true,
          base: '<%= yeoman.dist %>'
        }
      },
      proxies: [
            {
                context: '/outsides-images',
                host: 'd15790c7fypqrz.cloudfront.net/',
                https: true,
            }
        ]
    },

使用 gulp

我将向您展示一个使用 gulp 设置服务器的示例（我知道这不是一个完美的解决方案，但您可以看到模式）：

import proxy from 'http-proxy-middleware';
import gulp-connect from 'gulp-connect';

const imagesServiceProxy = proxy('/outsides-images', {
  target: 'https://d15790c7fypqrz.cloudfront.net/',
  changeOrigin: true,
  logLevel: 'debug',
});

gulp.task('serve', () => {
  connect.server({
    port: 3000,
    root: [ './dest' ],
    livereload: false,
    middleware: (connect, opt) => {
      return [
        imagesServiceProxy,
        historyApiFallback(),
      ];
    },
  });
});

这个 sn-p 在 ES6 中，我用gulp-connect 设置服务器。

现在，在您的 AngularJS/HTML 代码中，当您获取图像时，使用代理 URL，类似这样：

/outside-images/attachments/product_template_pictures/images/000/490/265/grid/832816_122.png

我不知道你是如何设置服务器的，但我希望这个答案能给你一个关于绕过 CORS 的提示。