В запрошенном ресурсе nodejs отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       12

В запрошенном ресурсе nodejs отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 07 ноября 2018
Доступ к изображению в 'https://s3.us -east-2.amazonaws.com / s3bucket / 1_1.png' из источника 'http://localhost:3000' заблокирован политикой 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 { };
      });
    });
}

Ответы [ 3 ]

0 голосов
/ 07 ноября 2018 
const express = require('express');
const app = express();        
var cors = require('cors');
        var corsOptions = {
        origin: '*'
       };
app.use(cors(corsOptions));
0 голосов
/ 07 ноября 2018

попробуйте добавить "proxy": "https://s3.us-east-2.amazonaws.com/" в ваш пакет. Json

или

добавление атрибута crossOrigin="anonymous" в тег img. Пример: <img src="https://s3.us-east-2.amazonaws.com/s3bucket/1_1.png" crossOrigin="anonymous">

0 голосов
/ 07 ноября 2018

Вместо 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;
...