npm 開始 - 使用 CORS

Question

我正在使用 Angular2 開發一個小應用程序。 在5 分鍾內。 快速入門指南npm 用於安裝所需模塊和啟動精簡服務器。 稍后我想在普通網絡服務器中使用該應用程序並使用 cordova 構建移動應用程序。但是，我正在使用 REST api 加載一些數據。 如何配置 lite-server 來解決 CORS 飛行前 OPTIONS 檢查？ 我的 apache 服務器（在專用服務器上）已經配置好，但我不想提交、更新和重新編譯每一個小改動。 我需要一個相應的配置：

Header always set Access-Control-Allow-Origin "https://my-domain.net:12345"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"

Answer 1

在lite-server中沒有內置選項可以做到這一點。 也就是說，你可以修補它，但我真的沒有看到你在這里嘗試做什么......

安裝后，您可以進入node_modules/lite-server文件夾並安裝connect-cors模塊：

npm install connect-cors

然后在lib/lite-server.js file ，您可以導入模塊並在之后使用中間件數組：

var historyFallback = require('connect-history-api-fallback');
var log = require('connect-logger');
var cors = require('connect-cors'); //  <------------------
(...)

sync.init({
  port: argv.port || 3000,
  server: {
    baseDir: options.baseDir,
    middleware: [
      cors(), //  <------------------
      log(),
      historyFallback({ index: options.fallback })
    ]
  },
  files: options.files,
});

使用以下命令啟動服務器時，CORS支持可用：

./bin/lite-server --baseDir ../../

通過在請求中添加Origin頭，您將在響應中看到CORS頭。

Answer 2

實際上lite-server只是瀏覽器同步的包裝器，如果你可以從https://www.browsersync.io/docs/options查看文件，你可以找到cors的配置，並且因為lite-server支持使用一個配置文件來設置選項，所以你需要做的就是為lite-server設置一個配置文件，你可以選擇bs-config.js或bs-config.json，如果我們使用最簡單的一個bs-config。 json，競爭對手是：

{
    "cors": true
}

然后你直接啟動lite-server，你可以看到：

瀏覽器同步配置

{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: './', middleware: [ [Function], [Function] ] },
  cors: true }

[BS]訪問網址：

   Local: http://localhost:3000

這意味着科爾斯的工作。

Answer 3

我找到了http-server

http-server -o --cors

Answer 4

我不確定它的解決方案是否有效，但是你需要如何安裝“connect-cors”到項目，然后在 bs-config.js 中將編寫下一個示例：

var cors = require('connect-cors');

module.exports = {
  port: 3000,
  files: [
    './src/**/*.{html,htm,css,js}'
  ],
  server: {
    baseDir: './build/',
    middleware: {
      // default middlewares for lite-server https://github.com/johnpapa/lite-server/blob/HEAD/lib/config-defaults.js
      3: cors({ origins: ['https://example-site.com'] }),
    },
  },
};