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

Question

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

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

可以使用 gulp-connect 中间件选项中的 proxy 配置来消除此错误吗？如果是的话我想知道怎么做。我尝试将响应 header “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'})
            ];
        }
    });
});

和服务如下:

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” 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