客户端与服务器通信时如何克服 "Access-Control-Allow-Origin" 错误

Question

所以我正在使用 swiip 的 yeoman 项目，名为 generator-gulp-angular - 只需执行 "npm search gulp-angular"，您就会看到它。

开箱即用的客户端是来自 127.0.0.1:3000 的运行，我希望对 127.0.0.1:8080 上的 (python) 服务进行 $http 调用。它使用浏览器同步进行实时重新加载和代理中间件来进行从客户端到服务器的代理调用。代理中间件默认是禁用的，所以诀窍是启用它并成功地向服务器发出请求并从服务器接收响应。到目前为止，我还没有成功启用它:-(

更新：我按照座右铭 "give yourself a simple example" 重新创建了 yeoman 项目，以便专注于访问控制问题，我让它或多或少地开箱即用，而不必求助于修改服务器逻辑，以允许跨源请求。令人高兴的是，它就像说明中描述的那样简单。这是扩展 gulp 中间件以执行代理的代理文件，或者更确切地说是从客户端到服务器的映射：

 /*jshint unused:false */

/***************

  This file proxy.js allows you to configure a proxy system plugged into BrowserSync
  in order to redirect backend requests while still serving and watching
  files from the web project

  IMPORTANT: The proxy is disabled by default.

  If you want to enable it, watch at the configuration options and finally
  change the `module.exports` at the end of the file

***************/

'use strict';

var proxyMiddleware = require('http-proxy-middleware');

var options = {
  target: 'http://127.0.0.1:8080'
};

var proxy = proxyMiddleware('/quote', options);

module.exports = function(){
  return [proxy];
}

从 gulp 文件 (gulpfile.js) 我们有：

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var middleware = require('./proxy');

module.exports = function(options) {

  function browserSyncInit(baseDir, browser) {
    browser = browser === undefined ? 'default' : browser;

    var routes = null;
    if(baseDir === options.src || (util.isArray(baseDir) && baseDir.indexOf(options.src) !== -1)) {
      routes = {
        '/bower_components': 'bower_components'
      };
    }

    var server = {
      baseDir: baseDir,
      routes: routes
    };

    
    // 
    // Here's the relevant bit
    //
    server.middleware = middleware();

    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([options.tmp + '/serve', options.src]);
  });

  ..
  
  gulp.task('serve:e2e-dist', ['build'], function () {
    browserSyncInit(options.dist, []);
  });
};

如您所见，我们正在配置 gulp 以了解在客户端使用时的“/quote”上下文 (http://localhost:3000/quote) will get mapped to the backend (http://localhost:8080/quote) - for further information: https://github.com/chimurai/http-proxy-middleware/blob/v0.0.5/README.md

这里是我们使用 $http 服务在客户端进行调用的地方：

function quotePriceGenerator($q, $http) {
  var lowPrice = 1.45000, highPrice = 1.47000;
  var askPrice, sellPrice;
  var service = {};
  service.getPrice = function() {
    var deferred = $q.defer();
    $http({
      url: '/quote',
      method: 'GET'
    })
    .then(function(quote) {
      var date = new Date();
      const quoteZoom = 100000;
      const quotePipsWindow = -3;
      ..
      qBox['trading-size-string'] = qBox['trading-size'].toString();
      service.qBox = qBox;
      return deferred.resolve(service);
    });
    // Returns a random integer between min (included) and max (included)
    // Using Math.round() will give you a non-uniform distribution!
    function getRandomIntInclusive(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    return deferred.promise;
  };
  return service;
  ..
  function randomizeAskSell(low, high){

  }
}



quotePriceGenerator.$inject = ['$q', '$http'];
export default quotePriceGenerator;

后端 python tornado REST API，不需要任何 Access-Control-Allow-Origin 配置。这是：

from __future__ import division
import tornado.ioloop
import pyrestful.rest
import random

from pyrestful import mediatypes
from pyrestful.rest import get

class Quote(object):
  quote_date_time = float
  ..
  sell_price = float
  trading_size = int

class QuoteResource(pyrestful.rest.RestHandler):
  @get(_path="/quote", _produces=mediatypes.APPLICATION_JSON)
  def getQuoteJson(self):
    price_min = random.randint(145000,146000)/100000
    price_max = random.randint(146000,147000)/100000
    ..
    quote.sell_price = sell_price
    quote.trading_size = trading_size
    return quote

if __name__ == "__main__":
  try:
    print("Start the service")
    app = pyrestful.rest.RestService([QuoteResource])
    app.listen(8080)
    tornado.ioloop.IOLoop.instance().start()
  except KeyboardInterrupt:
    print("\nStop the service")

Answer 1

您必须设置一个代理服务器来转发您的请求，在后端设置一个 reverse proxy, or setup CORS 以允许跨域请求。

Answer 2

有关错误 request/response 的一些信息也会有所帮助。

您可以尝试将 changeOrigin 参数设置为 true。这将修改请求的主机 header 以匹配服务器的主机名。

var proxyMiddleware = require('http-proxy-middleware');

var options = {
  target: 'http://127.0.0.1:8080',
  changeOrigin: true         // <-- changeOrigin
};

如果那不行；您可以将 Access-Control-Allow-Origin header 添加到响应中：

var proxyMiddleware = require('http-proxy-middleware');

var options = {
  target: 'http://127.0.0.1:8080',
  onProxyRes: function (proxyRes, req, res) {
    proxyRes.headers['Access-Control-Allow-Origin'] = '*';
  }
};

http-proxy-middleware onProxyRes 选项已添加到 v0.5.0 中，因此如果您仍在使用 v0.0.5

，请务必更新它

客户端与服务器通信时如何克服 "Access-Control-Allow-Origin" 错误

How to overcome "Access-Control-Allow-Origin" error when client talks to server

same-origin-policy

angularjs

yeoman

gulp