在节点框架 NestJS-6.3.1 中面对 CORS

Question

我正在使用nestJs => 6.3.1框架开发一个Node基础项目。我已经启用了所有代码，我仍然面临以下错误

CORS策略阻止了从源"http://localhost:4200"访问位于"localhost：3000"的XMLHttpRequest：跨源请求仅支持协议方案：http，data，chrome，chrome-extension，https。

core.js：7187 ERROR HttpErrorResponse {headers： HttpHeaders， status： 0， statusText： "Unknown Error"， url： "localhost：3000"， ok： false， ...}

我已经尝试了以下方法，但仍然面临同样的问题。

1. var app = await NestFactory.create(AppModule，{cors：true}); 等待应用程序收听(3000);

2. var app = await NestFactory.create(AppModule); 常量选项 = { 原产地："*"， 方法："获取，头，放置，补丁，发布，删除"， 印前检查继续：假， 选项成功状态： 204， 凭据：真， allowHeaders： 'Content-Type， Accept'， }; 控制台.log(应用程序); app.enableCors(options); 等待应用程序收听(3000);

   import { NestFactory } from '@nestjs/core';
   import { AppModule } from './app/app.module';
   async function bootstrap() {
   var app = await NestFactory.create(AppModule);
   const options = {
   origin: '*',
   methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
   preflightContinue: false,
   optionsSuccessStatus: 204,
   credentials: true,
   allowedHeaders: 'Content-Type, Accept',
   };
   console.log(app);
   app.enableCors(options);
   await app.listen(3000);
   }
   bootstrap();
   

预期输出：服务器应允许处理 cros 源请求，但它会给出以下问题或错误。

CORS策略阻止了从源"http://localhost:4200"访问位于"localhost：3000"的XMLHttpRequest：跨源请求仅支持协议方案：http，data，chrome，chrome-extension，https。

Answer 1

仔细阅读错误消息：

CORS策略阻止了从源"http://localhost:4200"访问位于"localhost：3000"的XMLHttpRequest：跨源请求：仅协议方案支持跨源请求：http，data，chrome，chrome-extension，https。

您没有通过HTTP(或HTTPS)发出请求，因此您的服务器(即HTTP服务器)无法响应它，因此您对运行服务器的代码所做的任何事情都不会产生影响。

您需要更改请求以localhost:3000开头的 URL 的代码，并将其更改为http://localhost:3000