Question

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

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上

在gulp-connect的中间件选项中使用proxy配置可以删除此错误吗？如果是，那么我想知道如何。我尝试设置一个响应标题＆＃39; allow-origin＆＃39;到＆＃39; http://localhost:8811＆＃39;从后端它工作但我想知道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

问题在于我在$resource EmployeeService中指定了完整的URL（即使使用协议和端口），我认为这会使代理的效果无效，而问题的第二部分是我有未在proxy( path ，options)函数中指定任何路径，因此所有请求都已获得代理但我只希望将REST调用代理，因为我是在进行REST API调用时获取'无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相关的错误消息。

Answer 2

已修复：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上

安装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中配置中间件

2 个答案: