在Gulp / BrowserSync中启用Cors

我用yeoman的样板代码创build了一个Angular项目（ generator-gulp-angular ）

现在在我的控制器中，我试图做一个这样的http请求：

$http.get('http://food2fork.com/api/search?key='+key+'&page=1').then(function(response) { vm.all = response.data; }); 

但是我一直得到这个错误：

跨源请求被阻止： 同源策略不允许读取http：// food2fork上的远程资源…（原因：缺lessCORS头'Access-Control-Allow-Origin'）

我做了我的研究，发现我需要添加这个访问控制到我的服务器，使用中间件属性，我做了，但我仍然不断收到错误在这里是我的server.js文件

 var path = require('path'); var gulp = require('gulp'); var conf = require('./conf'); var cors = require('cors'); var browserSync = require('browser-sync'); var browserSyncSpa = require('browser-sync-spa'); var util = require('util'); var proxyMiddleware = require('http-proxy-middleware'); function browserSyncInit(baseDir, browser) { browser = browser === undefined ? 'default' : browser; var routes = null; if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { routes = { '/bower_components': 'bower_components' }; } //here is where I added the middleware var server = { baseDir: baseDir, middleware: function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }, routes: routes }; browserSync.instance = browserSync.init({ startPath: '/', server: server, browser: browser }); } browserSync.use(browserSyncSpa({ selector: '[ng-app]'// Only needed for angular apps })); gulp.task('serve', ['watch'], function () { browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); }); gulp.task('serve:dist', ['build'], function () { browserSyncInit(conf.paths.dist); }); gulp.task('serve:e2e', ['inject'], function () { browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []); }); gulp.task('serve:e2e-dist', ['build'], function () { browserSyncInit(conf.paths.dist, []); }); ` 

但仍然错误仍然存​​在，有什么帮助？

Answer 1

你应该在服务器端添加额外的信息，头文件和方法是允许的。 例如：

 res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); 

要么

 res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); 

这将告诉服务器接受客户端发送的头文件（例如Origin）以及您计划支持的HTTP方法（例如GET）。

有关CORS的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 2

您需要http-proxy-middleware，但不使用它！ 如果您想为包含/ api的所有URLparsing跨域，首先应该将您的Angular请求转发到您的BrowserSync服务器

所以

 $http.get('http://food2fork.com/api/search?key='+key+'&page=1') 

应该成为

 $http.get('/api/search?key='+key+'&page=1') 

BrowserSync将接收该呼叫

在浏览器中将呼叫转接到后面的真实服务器

 target :'http://food2fork.com/' 

并在响应返回时添加交叉源头

 changeOrigin: true, 

完整的configuration变成：

 var proxyMiddleware = require('http-proxy-middleware'); const jsonPlaceholderProxy = proxyMiddleware('/api', { target: 'http://food2fork.com/api', changeOrigin: true, logLevel: 'debug' }); module.exports = function() { return { server: { middleware: [jsonPlaceholderProxy], baseDir: baseDir } }; };