Перекрестная ошибка при загрузке файла из AngularJS в NodeJS

ProgramBox

Перекрестная ошибка при загрузке файла из AngularJS в NodeJS

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#javascript #node.js #angularjs #cors

Вопрос:

у меня проблема с загрузкой файлов из клиента angularjs на сервер NodeJS.

Ошибка его:

 XMLHttpRequest cannot load http://localhost:801/bill/send-by-email. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

Другой HTTP-запрос $ работает нормально, но этот нет, это мой клиентский код:

 define([], function () {
    "use strict";

    var UploadService = function (API_URL, $http) {
        var uploadFile = function (file, uploadUrl) {
            var fd = new FormData();
            fd.append('file',file);
            return $http({
                method: 'POST',
                url: API_URL uploadUrl,
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: {
                    file: file
                },
                transformRequest: fd
            });

        };
        return {
            uploadFile: uploadFile
        };
    };
    return UploadService;
});

И это серверный код, и перекрестный код:

 //Normal express definition
app.use(express.compress());
    app.use(express.methodOverride());
    app.use(express.cookieParser());
    app.use(express.bodyParser({limit: '500mb',keepExtensions: true, uploadDir: "uploads" }));
    app.use(express.json({limit: '100mb'}));
    app.use(express.urlencoded({limit: '100mb'}));
    app.use(passport.initialize());
    app.use(passport.session());
    app.all('*', require('./middleware/logger')(log));
    app.all('*', require('./middleware/cors')(log));

Файл cors его:

 var env = require('../env');

module.exports = function(log) {
    "use strict";

    var host = env.host;
    log.warn('Configuring Access-Control-Allow-Origin to '   host);
    return function(req, res, next) {
        res.header("Access-Control-Allow-Origin", host);
        res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
        res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        res.header("Access-Control-Allow-Credentials", "true");
        next();
    };
};

И мой env-файл:

 var envs = {
    'development' : {
        'host' : 'http://localhost:8000',
        'sleep': true,
        'name': 'development',
        'ssl': false
    },
    'test' : {
        'host' : 'edited',
        'sleep': false,
        'name': 'test',
        'ssl': false
    },
    'production' : {
        'host' : 'edited',
        'sleep': false,
        'name': 'production',
        'ssl': true
    }
};

var node_env = process.env.NODE_ENV || 'development';

Кто-нибудь знает, в чем проблема?

1. Другой порт = другое происхождение.

2. Я не делаю что-то другое, как в другом запросе, порт тот же..

3. Ну, приложение на http://localhost:8000 пытается загрузить содержимое из http://localhost:801 . Порт не тот.

4. Это потому, что порт 8000 является клиентом angularj, а порт 801 — сервером nodejs.

5. Следовательно, это другой домен. Предоставьте клиенту доступ к серверу с вашими настройками CORS.

Ответ №1:

Вам необходимо разрешить вашему клиенту доступ к CORS, поскольку он находится в другом домене. Поскольку ваши порты разные, браузер и сервер распознают их как независимые домены, не имеющие никакого отношения друг к другу.

 res.header("Access-Control-Allow-Origin", 'http://localhost:8000');

Ответ №2:

Я использую подобное, и это работает

 response.setHeader('Content-Type', 'application/json');
            response.setHeader('Access-Control-Allow-Origin', '*');
            response.setHeader('Access-Control-Allow-Headers', '*');
            response.setHeader('Access-Control-Allow-Credentials', 'true');
            response.setHeader('X-SERVED-BY', 'Site Name');

попробуйте поместить *

Ответ №3:

Ошибка, это запрос, он неверен content-type и возвращает мне эту ошибку. cors Все было в порядке.

Я отредактировал это:

 define([], function () {
    "use strict";

    var UploadService = function (API_URL, $http) {
        var uploadFile = function (file, uploadUrl) {
            var fd = new FormData();
            fd.append('file', file);
            return $http.post(API_URL   uploadUrl,fd,{
                withCredentials: true,
                headers: {'Content-Type': undefined },
                transformRequest: angular.identity
            });

        };
        return {
            uploadFile: uploadFile
        };
    };
    return UploadService;
});

Ответ №4:

Включите CORS на вашем Node.js

Вот URL, который можно использовать для нескольких конфигураций http://enable-cors.org/server.html