Question

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

这是我收到的错误消息。我的代码在firefox中有效，我猜想firefox不在乎cors，但是在其他浏览器中却遇到此错误。我尝试了各种方法，但仍然无法正常工作。从我的阅读中，我应该在标题中添加'Access-Control-Allow-Origin'：'*'，尝试了一下却没有成功，可能是做错了，不确定。我还安装了cors软件包，并尝试在没有运气的情况下使用它。

amazon 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>

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');

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;
              }
          }
      });

dashboard.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中添加tesseract yourimage.tif out pdf tsv

或

在标签img上添加属性"proxy": "https://s3.us-east-2.amazonaws.com/"。例如： 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;

Answer 3

const express = require('express');
const app = express();        
var cors = require('cors');
        var corsOptions = {
        origin: '*'
       };
app.use(cors(corsOptions));

所请求的资源节点上没有'Access-Control-Allow-Origin'标头

3 个答案: