npm start - 使用CORS

Question

我正在开发一个小应用，使用Angular2技术。在5分钟快速入门指南中，使用npm来安装所需的模块并启动一个lite服务器。后来我想要在普通的Web服务器上使用该应用，并使用cordova构建移动应用程序。然而，我正在使用REST API来加载一些数据。我该如何配置lite-server来解决CORS预检测选项检查？我的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"

- letmejustfixthat

---

据我所了解，根据你的架构设计，你的lite-server只提供客户端/浏览器应用程序及其静态内容（例如JavaScript脚本、CSS和HTML文件）。这些文件将通过HTTP调用请求数据到你的tomcat服务器。如果tomcat服务器没有在响应中添加CORS标头，则这些调用可能会导致CORS错误。因此，你实际上不需要配置lite-server。你并没有从tomcat服务器向静态内容服务器发送请求，对吧？ - Langley

嗯，我正在从lite-server向我的主服务器进行REST调用（该服务器位于与本地Web服务器不同的域中）。而且我总是遇到CORS错误。检查Thierry的答案；现在它可以工作了。 - letmejustfixthat

Answer 1

lite-server内部没有直接实现这个功能的选项。不过，你可以打补丁来实现它，但我不确定你在尝试做什么...

安装完成后，你可以进入node_modules/lite-server文件夹并安装connect-cors模块：

npm install connect-cors

接下来，在lib/lite-server.js文件中，您可以导入该模块，并在中间件数组中使用它：

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头。

- Thierry Templier

---

搞定了。我现在只是在本地机器上开发，而不是在服务器上（正如我所说，我不想提交每一个更改，除非头文件正确，否则它不会工作），谢谢。 - letmejustfixthat

考虑最后一个答案，对我来说似乎有效：http-server -o --cors - Bob

Answer 2

我使用http-server发现：

http-server -o --cors

- Leandro Souza

Answer 3

实际上，lite-server只是browser-sync的一个包装器。如果您可以查看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

这意味着CORS起作用了。

- HTG

---

这行不通，仍然没有发送“Access-Control-Allow-Origin”头信息。 - wodzu

你的解决方案没有效果，你测试过了吗？ - Paul Alexeev

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

- Paul Alexeev