0

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

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

可以使用proxygulp-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
        }
    },{});
}]);
4

2 回答 2

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

参考：这里

于 2017-11-24T07:08:58.650 回答
0

问题是我指定了完整的 URL（即使使用协议和端口） ，我认为$resource在EmployeeService其中消除了代理的影响，问题的第二部分是我没有指定任何路径proxy(path，options)函数，因此所有请求正在被代理，但我只想代理 REST 调用，因为在进行 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相关的错误消息。

于 2017-06-12T13:28:11.463 回答