布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

CORS在Express使用TypeScript

快速浏览如何使用TypeScript和CORS中间件在Express应用程序中配置CORS。

如果你不熟悉跨源资源共享(歌珥),以下是维基百科给出的定义:

跨源资源共享(CORS)是一种机制,它允许web页面上受限制的资源(例如字体)从提供第一个资源的域之外的另一个域请求。

我对CORS的用例是一个Angular应用程序,它向运行在Express.js中的API发出REST请求。我将使用TypeScript,它将被编译成与ES2015 (ES6)兼容的JavaScript,并将在Node.js中执行。

开始

我们将使用Express提供一些很棒的内容。我将假定您已经安装:

  • node . js
  • npm—节点包管理器
  • 一个表达的应用

首先,让我们安装依赖项。我会用歌珥中间件。所以,让我们安装这个包以及TypeScript定义:

美元npm安装歌珥,拯救美元npm安装@types /歌珥,save-dev

设置

让我们开始server.ts我们将在Express应用中启用和配置CORS的文件:

进口*作为歌珥“歌珥”;/ /获取路由器var路由器=表达路由器();// cors中级软件选项常量选项:歌珥CorsOptions={allowedHeaders:(“起源”,“X-Requested-With”,“内容类型”,“接受”,“X-Access-Token”,],凭证:真正的,方法:负责人的,选项,把,,,删除的,起源:API_URL,preflightContinue:,};/ /使用歌珥中间件路由器使用(歌珥(选项));/ /添加你的路线/ /启用飞行前路由器选项(‘*’,歌珥(选项));

让我们看看上面的代码:

  • 首先,导入歌珥包中。
  • 接下来,我们创建一个新的路由器对象。这是因为我只想为我在应用程序中构建的REST API路由启用CORS。如果想在根路由上启用CORS,可以替换路由器与您的Express应用程序的参考。
  • 接下来,配置选项歌珥。您将需要根据应用程序的需要配置CORS。我正在为源自应用程序URL的所有HTTP谓词启用CORS,该URL存储在API_URL常数。您需要将其与应用程序的URL交换。
  • 然后,配置路由器使用()cors中间件,传递我们的选项。这必须在你的其他路线之前到达。
  • 最后,我为所有人开启了飞行前准备选项HTTP请求。这对于我的Angular应用程序是必要的。

这里是它的行动:

邮件模板截图

注意以下标题的值:

  • Access-Control-Allow-Credentials-设置为真正的启用凭证(我在Express.js应用程序中使用passport进行身份验证)。这是因为我设置凭证产权在我选项对象真正的
  • Access-Control-Allow-Headers-这匹配的值,我提供的cors中间件在allowedHeaders属性的配置选项。
  • Access-Control-Allow-Methods-同样,这个匹配的值方法财产。
  • Access-Control-Allow-Origin-这是我的价值API_URL常量字符串。这是为了将CORS请求限制在一个原点,这是我的Angular应用程序。在本例中,值为https://local.johnoneone.com:4200。注意,它匹配起源请求中的头值。

现在我们已经为REST API配置了CORS。现在,是时候构建一些很棒的东西了!

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。