请求的资源 nodejs 上不存在“Access-Control-Allow-Origin”标头

Question

CORS 政策已阻止从源“http://localhost:3000”访问“https://s3.us-east-2.amazonaws.com/s3bucket/1_1.png”上的图像：无“访问控制” -Allow-Origin' 标头存在于请求的资源上。 因此，不允许访问 Origin 'http://localhost:3000'。

这是我收到的错误消息。 我的代码在 Firefox 中工作，我猜 Firefox 不关心 cors 但在其他浏览器中我收到此错误。 我尝试了各种方法，但仍然无法正常工作。 从我读到的内容来看，我应该将 'Access-Control-Allow-Origin': '*' 添加到标题中，尝试过但没有用，可能做错了，不确定。 我还安装了 cors 包并尝试使用它，但没有运气。

亚马逊CORS配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

服务器.js

var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var AWS = require('aws-sdk');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


var dbHost = 'mongodb://mlab info'


mongoose.connect(dbHost, { useNewUrlParser: true })

app.get('/', function(req, res) {
        res.sendFile(__dirname + 'index.html');
}); 

//One of the things I tried
app.all('/*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  next();
});

app.listen(process.env.PORT || 3000);

console.log('Magic happens on port 3000');

exports = module.exports = app;

ang.js

var myapp = angular.module('StarterApp', ['ngRoute','ngAnimate','ngMaterial','LocalStorageModule','ngGeolocation','md.data.table',]);
    myapp.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'home.html',
            controller: 'mainController'
          }).
          when('/dashboard', {
            templateUrl: 'dashboard.html',
            controller: 'dashController'
          }).
          when('/kpi', {
            templateUrl: 'kpi.html',
            controller: 'kpiController'
          }).
          when('/kpiJobCreate', {
            templateUrl: 'kpiJobCreate.html',
            controller: 'bookController'
          }).
          when('/detail', {
            templateUrl: 'detail.html',
            controller: 'detailController'
          }).
          when('/book', {
            templateUrl: 'book.html',
            controller: 'bookController'
          }).
          when('/map', {
            templateUrl: 'map.html',
            controller: 'dashController'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

      myapp.factory('userfactory', function(){
          userinfo = { };

          return {
              set: function(data){
                  userinfo = data;

              },
              get: function(){
                  return userinfo;
              }
          }
      });

仪表板.js //我试图访问文件的地方。 如果重要的话，它在 $compile 模板中

myapp.controller("dashController", dashController);

    function dashController($scope, $http, $mdSidenav, $location, $mdDialog, $q, $timeout, $log, userfactory, localStorageService, $geolocation, $window, $compile) {

    s3.listObjects({ Prefix: featureType3 }, function (err, data) {
      if (err) {
        return alert('There was an error viewing the features: ' + err.message);
      }
      data.Contents.map(function (photo) {
        var photoKey = photo.Key;
        var photoUrl = href + encodeURIComponent(photoKey);

        var idxDot = photoKey.lastIndexOf("_") + 1;
        var extFile = photoKey.substr(idxDot, photoKey.length).toLowerCase();
        if (extFile == "1.png") {
          var htmlTemplate = $compile(
            '<li id="item3" class="ng-scope">' +
            '<img style="border: 3px solid black; width:85px; height:85px;" src="' + photoUrl + '"ng-click="addFeature(\'' + photoKey + '\');">' +
            '</li>')($scope) //I see the image here but it wont pass as into another function when I click on it called addFeature where I add it to a canvas
          angular.element(document.getElementById('app7')).append(htmlTemplate)
        } else { };
      });
    });
}

Answer 1

尝试在 package.json 上添加"proxy": "https://s3.us-east-2.amazonaws.com/"

或者

在标签 img 上添加属性crossOrigin="anonymous" 。 例如： <img src="https://s3.us-east-2.amazonaws.com/s3bucket/1_1.png" crossOrigin="anonymous">

Answer 2

而不是app.all()使用app.use()并将其放在app.get之前

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  next();
});

更新了 server.js

var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var AWS = require('aws-sdk');
//One of the things I tried
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  next();
});
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


var dbHost = 'mongodb://mlab info'


mongoose.connect(dbHost, { useNewUrlParser: true })

app.get('/', function(req, res) {
        res.sendFile(__dirname + 'index.html');
}); 



app.listen(process.env.PORT || 3000);

console.log('Magic happens on port 3000');

exports = module.exports = app;