启用一个Cors在咕嘟咕嘟/ BrowserSync

我已经创建了自耕农的样板代码（generator-gulp-angular）启用一个Cors在咕嘟咕嘟/ BrowserSync

现在在我的控制，我试图让这样的http请求的角度项目：

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

但我不断收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://food2fork ... (Reason: CORS header 'Access-Control-Allow-Origin' missing)

我做我的研究，发现我需要该访问控制添加到我的服务器，使用中间件正确TY，我做到了，但我仍然不断收到错误，这里是我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, []); 
}); 
`

但还是错误仍然存在，任何帮助吗？

来源

2016-04-28 Dwight Lisper

您应该在服务器端添加允许标头和方法的附加信息。例如：

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");

这将告诉服务器接受头由客户端（例如产地），以及你计划支持的HTTP方法发送（如GET）。

如需进一步信息上看到CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

来源

2016-04-28 11:20:25 oberbics

仍是同样的错误，这是我的唯一的地方这样做，也许它在别的地方... var server = { baseDir：baseDir，中间件：函数（req，res，next）res.setHeader（“Access-Control-Allow-Headers”，“Origin，X-Requested-With，Content-Type，Accept”）; res。setHeader（“Access-Control-Allow-Methods”，“GET，POST，DELETE，PUT”）; next（）; }，路线：路线 }; ' –

你应该仍然设置res.setHeader（'Access-Control-Allow-Origin'，'*'）;以及 – oberbics

是的，我试过所有的组合 –

您需要的HTTP代理中间件，但不使用它！如果你想解决跨地为所有URL包含/ API，第一您应在角请求转发给您的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,

全配置变为：

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 
    } 
    }; 
};

来源

2016-12-16 02:49:44

启用一个Cors在咕嘟咕嘟/ BrowserSync

回答

相关问题