Настройка промежуточного программного обеспечения в gulp с помощью плагина gulp-connect

Question

Бэкэнд часть моего проекта работает на http://localhost:8080 и интерфейс работает на сервере gulp-connect на http://localhost:8811.При работе в Chrome при каждом вызове API REST chrome генерирует это сообщение об ошибке.

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

Можно ли устранить эту ошибку с помощью proxy конфигурация в опциях промежуточного программного обеспечения gulp-connect? если да, то я хочу знать, как. Я попытался установить заголовок ответа 'allow-origin' в ' http://localhost:8811/' из серверной части, и это сработало, но я хочу знать, может ли gulp помочь устранить эту ошибку.

Ниже приведен фрагмент из моего gulpfile.js

gulp.task('webserver',function(){
    gulpWebServer.server({
        root : ['.'],
        port : 8811,
        host : 'gulp_dev',
        livereload : true,
        middleware: function(connect, opt) {
            return [
                proxy({ changeOrigin: true,target: 'http://localhost:8080'})
            ];
        }
    });
});

а также service как следует:

angular.module('RestAssignment').service('EmployeeService',["$resource",function($resource){
    return $resource('',{},{
        fetchEmployeeById :{
            url:'http://localhost:8080/rest/abc/getEmployeeById/2',
            method:'GET'
        },
        fetchEmployeeList : {
            url:'http://localhost:8080/rest/abc/getAllEmployees',
            method:'GET',
            isArray : true
        }
    },{});
}]);

Answer 1

Проблема заключалась в том, что я указывал полный URL (даже с протоколом и портом) в $resource в EmployeeService который, я думаю, сводил на нет эффект прокси, и вторая часть проблемы заключалась в том, что я не указал какой-либо путь в proxy(path, options) функция и из-за этого все запросы были проксированы, но я хотел, чтобы только прокси-вызовы были проксированы, так как я получал заголовок "No Access-Control-Allow-Origin" при выполнении вызовов REST API. поэтому я изменил gulpfile.js на следующее:

gulp.task('webserver',function(){
    gulpWebServer.server({
        root : ['.'],
        port : 8811,
        host : 'gulp_dev',
        livereload : true,
        middleware: function(connect, opt) {
            return [
                return proxy('/rest/**', { target: 'http://localhost:8080', changeOrigin : true});
            ];
        }
    });
});

а также EmoloyeeService к:

angular.module('LNAssignment').service('EmployeeService',["$resource",function($resource){
    return $resource('',{},{
        fetchEmployeeById :{
            url:'/rest/abc/getEmployeeById/2',
            method:'GET'
        },
        fetchEmployeeList : {
            url:'/rest/abc/getAllEmployees',
            method:'GET',
            isArray : true
        }
    },{});
}]);

Теперь прокси промежуточного программного обеспечения работает без каких-либо сообщений об ошибках, связанных с CORS.

Answer 2

ИСПРАВЛЕНО: В запрашиваемом ресурсе отсутствует заголовок "Access-Control-Allow-Origin"

установить пакет Cors:

npm install --save-dev cors

затем добавьте его в качестве промежуточного программного обеспечения для подключения:

var gulp = require('gulp');
var connect = require('gulp-connect');
var cors = require('cors');

gulp.task('connect', function() {
  connect.server({
    root: 'app',
    middleware: function() {
        return [cors()];
    }
  });
});

Ссылка: здесь