Question

我在Heroku上托管的AngularJS应用程序时出现以下错误：

访问图像＆＃39; https://d15790c7fypqrz.cloudfront.net/attachments/product_template_pictures/images/000/490/265/grid/832816_122.png＆＃39; 来自原产地＆＃39; http：// .herokuapp.com＆＃39;被封锁了 CORS政策：No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的资源。来源＆＃39; http：// .herokuapp.com＆＃39;因此不是允许访问。

我该如何解决？这是执行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有一种棘手的方法。如果角度代码部署在节点服务器上，则可以代理图像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(),
      ];
    },
  });
});

此代码段位于ES6中，我使用gulp-connect设置服务器。

现在，在您的AngularJS / HTML代码中，当您获取图像时，请使用代理URL，如下所示：

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

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

CORS政策：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

1 个答案: