使用gulp-connect插件在gulp中配置中间件

Question

我项目的后端部分运行在http://localhost:8080而前端运行在http://localhost:8811上的gulp-connect服务器上。当在chrome上运行时，每当进行REST api调用时，chrome就会生成此错误消息-

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

可以使用gulp-connect的中间件选项中的proxy配置来消除此错误吗？ 如果是，那么我想知道如何。 我尝试将后端的响应标头'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

固定：请求的资源上不存在“ 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()];
    }
  });
});

参考： 这里

Answer 2

问题是我在EmployeeService $resource中指定了完整的URL（甚至带有协议和端口），我认为这使代理的作用无效，问题的第二部分是我没有在proxy( path ， options)指定任何路径options)功能，因此，所有请求都被代理，但是我只希望代理REST调用，因为在进行REST API调用时，我收到“ No Access-Control-Allow-Origin标头” 。 所以我将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相关的错误消息。