时间戳

首页 > 解决方案 > 本地主机上的 Nestjs（服务器）和 Vuejs（客户端）上的 CORS 阻塞获取功能

javascript - 本地主机上的 Nestjs（服务器）和 Vuejs（客户端）上的 CORS 阻塞获取功能

问题描述

我尝试通过使用节点和嵌套 js 来学习构建我自己的 RestAPI。一切正常，在 POSTMAN 上测试：它工作正常。

但是当我试图从我的前端获取它时，它被 CORS 阻止了。虽然我在 Nestjs 上启用了 cors 设置。

import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

并从 VueJS 调用它：

postPackageToServer: function () {
  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");

      var raw = JSON.stringify({
        type: "monthly",
        price: 30,
        startDate: "04-08-2020",
        endDate: "06-08-2020",
      });

      var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow",
      };

      let postData = async() => {
        let postingDating = await fetch("localhost:3000/vouchers", requestOptions)
        .then((response) => response.text())
        .then((result) => console.log(result))
        .catch((error) => console.log("error", error));
      }
    },

我可以知道我做错了什么吗？以及如何解决它。如果这个问题已经被其他问题回答了，我很想从中学习。

谢谢你

标签： javascriptvue.jscorsfetchnestjs

解决方案

看起来你的代码没问题。

尝试在客户端请求上添加 http/https 协议

尝试更改 cors 选项

var corsOptions = {
    origin: 'http://example.com',
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) 
    choke on 204
}

推荐阅读