Node 系列（八）分环境运行以及跨域

2022-05-29

字数统计: 1.6k字 | 阅读时长≈ 6分

跨域

什么是跨域

我们知道一个 URL 是由协议、域名、端口三部分组成的，如：http://loveanv.cn:80，那么当请求 URL 的协议、域名、端口中的任意一个与当前页面的 URL 不同，则被认为是跨域。

产生原因

出于浏览器的同源策略的限制。

何为同源策略，为什么需要同源策略

同源策略是一种约定，也是浏览器最核心最基本的安全功能。所谓同源即协议、域名、端口相同。
同源策略存在的意义：

非同源下的 Cookie 等隐私数据可以被随意获取
非同源下的 DOM 可以被任意操作
如果 Ajax 或 Axios 可以随意请求，则会对用户的隐私造成泄露，引起不同程度的损失

了解了这些之后，我们来看下在 Midway 中，如何解决跨域

解决跨域

首先，我们需要安装依赖，这里我们使用 Midway 官方文档中的依赖。

1	$ npm install @koa/cors

之后在 configuration.ts 中启用

/*
* 我们可以进入 @koa/cors 源码查看具体的使用方法
* 我们发现 cors() 接收一个 options 作为参数，该参数为对象，具体的参数放到这里，可根据需要自行设置
* */
/**
 * CORS middleware
 *
 * @param {Object} [options]
 *  - {String|Function(ctx)} origin `Access-Control-Allow-Origin`, default is request Origin header
 *  - {String|Array} allowMethods `Access-Control-Allow-Methods`, default is 'GET,HEAD,PUT,POST,DELETE,PATCH'
 *  - {String|Array} exposeHeaders `Access-Control-Expose-Headers`
 *  - {String|Array} allowHeaders `Access-Control-Allow-Headers`
 *  - {String|Number} maxAge `Access-Control-Max-Age` in seconds
 *  - {Boolean|Function(ctx)} credentials `Access-Control-Allow-Credentials`, default is false.
 *  - {Boolean} keepHeadersOnError Add set headers to `err.header` if an error is thrown
 *  - {Boolean} secureContext `Cross-Origin-Opener-Policy` & `Cross-Origin-Embedder-Policy` headers.', default is false
 * @return {Function} cors middleware
 * @api public
 */
const cors = require('@koa/cors');
export class ContainerLifeCycle {
  @App()
  app: koa.Application;
/*
* 知道了跨域的起因，那么我们主要需要设置的就是 origin 了，根据源码，我们发现它可以接收字符串的参数，
* 也可以设置为一个函数，它以 `ctx` 作为第一个参数。
* 经过反复实验，发现 orgin 不管是字符串还是函数，都不能设置为 * ，
* 即字符串类型的参数，不可直接设置为 * ，需要写带有 http:// 或 https:// 的域名，
* 函数不能 return '*'，也是需要 return 具体的域名
*  */
  async onReady() {
    this.app.use(
      cors({
        /*origin: function (ctx) {
          // 可以根据逻辑去写多个域名
          return 'http://localhost:8080'; //只允许http://localhost:8080这个域名的请求
        },*/
        origin: 'http://localhost:8080',
        maxAge: 5, //指定本次预检请求的有效期，单位为秒。
        credentials: true, //是否允许发送Cookie
        allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
        allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
        exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], //设置获取其他自定义字段
      })
    );
  }
}

到此，我们的跨域问题就解决了。最后我们对比一下，设置跨域和没有设置跨域的请求体有什么区别

可以看到，设置跨域的请求中，多了我们设置的属性

分环境运行

业务配置文件

一般情况下，项目都是多环境运行的，在 Midway 项目中，我们可以自定义目录，放入多个环境的配置文件，如下：

.
├── src
│   ├── config
│   │   ├── config.default.ts
│   │   ├── config.prod.ts
│   │   ├── config.unittest.ts
│   │   └── config.local.ts
│   ├── interface.ts
│   └── service
├── test
├── package.json
└── tsconfig.json

config.default.ts 为默认的配置文件，所有环境都会加载这个配置文件，一般也会作为开发环境的默认配置文件。
我们根据自己的需求，添加不同环境的配置文件即可

加载业务配置文件

业务配置文件添加之后，我们需要加载进来才可以。这里有两种加载配置文件的方式，我们来看一下吧。

对象形式加载

从 Midway V3 开始，主推的加载方式就是对象形式加载。
对象形式加载配置文件，配置文件必须显示指定添加，后续框架会根据实际的环境进行合并。如下：

// src/configuration.ts
import { Configuration } from '@midwayjs/decorator';
import { join } from 'path';

import * as DefaultConfig from './config/config.default';
import * as LocalConfig from './config/config.local';

@Configuration({
  importConfigs: [
    {
      default: DefaultConfig,
      local: LocalConfig
    }
  ]
})
export class ContainerLifeCycle {
}

importConfigs 的数组中传递配置对象，其中每个对象的 key 为环境，值为环境所对应的配置值，即我们 import 进来的文件。

指定目录或者文件

指定目录

指定目录，该目录里的所有的 config.*.ts 文件都会被加载。

// src/configuration.ts
import { Configuration } from '@midwayjs/decorator';
import { join } from 'path';

@Configuration({
  // 这里会把 config 文件夹下的所有文件加载进来，实际运行的时候，会自动选择当前的环境来找到对应的文件
  importConfigs: [
    join(__dirname, './config/'),
  ]
})
export class ContainerLifeCycle {
}

指定特定的文件

我们可以手动指定一批文件，如下，把指定的文件的路径这样添加即可，但是这样需要注意一点就是如果该文件不存在，就会报错，所以一定要保证该文件存在。

// src/configuration.ts
import { Configuration } from '@midwayjs/decorator';
import { join } from 'path';

@Configuration({
  importConfigs: [
    join(__dirname, './config/config.default'),
    join(__dirname, './config/config.local'),
    join(__dirname, './config/config.pro')
  ]
})
export class ContainerLifeCycle {
}

上面我们提到过，框架会根据实际环境合并配置项，那么我们来了解一下配置文件的加载顺序以及合并规则。

配置文件加载顺序

默认都会先加载 default.config.ts 文件。
配置存在优先级（应用代码 > 组件），相对于此运行环境的优先级会更高。举个例子，比如 pro 环境下加载顺序，后加载的会覆盖前面的同名文件：

-> 组件 config.default.ts
-> 应用 config.default.ts
-> 组件 config.prod.ts
-> 应用 config.prod.ts

配置文件合并规则

默认会加载 config.default.ts 文件以及 config.{环境}.ts 文件，比如：
在 pro 环境，会查找 config.default.ts 和 config.pro.ts 这两个文件，而其他环境则会查找 config.default.ts 和其对应的环境的文件。

这样其实简单的分环境运行就可以了。

本文作者： Gladysdrea
本文链接： https://gladysdrea.github.io/blogs/2022/05/29/Node系列/Node系列(八)分环境运行以及跨域/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！