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

Question

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

请求的资源上没有 'Access-Control-Allow-Origin' header

是否可以使用 gulp-connect 中间件选项中的 proxy 配置来消除此错误？如果是，那么我想知道如何。我尝试将响应 header 'allow-origin' 从 back-end 设置为 '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

问题是我在 EmployeeService 中的 $resource 中指定了完整的 URL （即使有协议和端口），我认为这使代理和第二部分的效果无效问题是我没有在 proxy(path,options) 函数中指定任何路径，因此所有请求都被代理了，但我想要只有 REST 调用被代理，因为我在进行 REST API 调用时收到 'No Access-Control-Allow-Origin header'。所以我将 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'header

安装 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()];
    }
  });
});

参考：here

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

Configuring middleware in gulp using gulp-connect plugin

javascript

node.js

gulp

gulp-connect