Angular 6 HttpClient - CORS 问题

2024-04-26

我的 Nodejs Restful 服务有以下端点http://localhost:3000/api/countries http://localhost:3000/api/countries。我正在使用这个中间件https://github.com/expressjs/cors https://github.com/expressjs/cors。我已启用 cors,因此:-

const cors = require('cors');
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

我的 Angular 6 应用程序中有以下代码,托管于http://本地主机:4200 http://localhost:4200

   import { HttpClient, HttpHeaders } from '@angular/common/http';

   httpClient: HttpClient;

   getCountries(): Observable<any> {
     const url = 'http://localhost:3000/api/countries';
     const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*'
      })
     };
     return this.httpClient.get(url, httpOptions).pipe(
        map((result: any) => {
            return result;
        })
     );
   }

我的 React 应用程序中有以下代码http://本地主机:3001 http://localhost:3001

getCountries() {
    const url = 'http://localhost:3000/api/countries';
    const init = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
   };

   try {
    const response = await fetch(url, init);
    const json = await response.json();
    return json
   };
 }

我的反应代码完美地给出了所需的响应,但 Angular 6 给出了以下错误:-

访问 XMLHttpRequest 位于 'http://localhost:3000/api/countries http://localhost:3000/api/countries' 从 起源 'http://本地主机:4200 http://localhost:4200' 已被 CORS 策略阻止: 请求头字段 access-control-allow-origin 不允许 预检响应中的 Access-Control-Allow-Headers。

我的 Angular 6 代码做错了什么?

请注意,我已经看到建议使用类似问题的答案 一个 json 文件 (proxy.conf.json),用作代理服务器或安装 chrome 扩展。这些对我来说不是选择。

预先感谢您的有用回复。


您可以使用this https://cors-anywhere.herokuapp.com/如果你想要一个快速的临时解决方案。

const url = 'https://cors-anywhere.herokuapp.com/http://localhost:3000/api/countries';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 6 HttpClient - CORS 问题 的相关文章

  • 在打字稿中读取和写入文本文件

    我应该如何从 Node js 中的 TypeScript 读取和写入文本文件 我不确定是否会在 node js 中读 写沙箱文件 如果没有 我相信应该有一种访问文件系统的方法 相信应该有一种访问文件系统的方法 Include node d
  • “ng build”将脚本移动到子文件夹

    ng build将文件导出到 dist 文件夹 如下所示 index html main bundle js styles bundle js 我希望脚本位于子文件夹中 index html scripts main bundle js s
  • React - 如何获取组件子元素的大小并重新定位它们

    我有一个组件 它在动态网格中排列元素 如下所示 class GridComponent extends React Component render return div items map function item return div
  • 从 React Native 中的数组映射函数动态渲染内容

    我正在尝试从数组中获取数据并使用映射函数来呈现内容 看着 this lapsList 以及相关的 lapsList 函数来理解我想要做什么 结果是没有显示任何内容 视图下的视图等 这是我的简化代码 class StopWatch exten
  • 从节点服务器上的 AWS S3 获取签名 URL

    Solved 我想得到一个签名网址从我的亚马逊S3服务器 我是新来的AWS 我在哪里设置我的密钥 and 访问 ID 密钥以便S3识别来自我的请求server var express require express var app expr
  • React - Material-UI - 如何在react-hook-form中使用具有多个值的Select

    我正在尝试使用 UI 材质Select里面有多个选项react hook form没有成功 在尝试使用多种选项之前我已经完成了这项工作
  • React Native 中未捕获的引用错误?

    我在 React Native 中遇到了未捕获的引用错误 为什么会这样 我能够成功构建 但捆绑程序显示此错误 我该如何解决它 注意 我使用的是Windows 10 截屏 包 json name rchampz version 0 0 1 p
  • 如何提高 MongoDB 中 update() 和 save() 的性能?

    我正在寻找有关如何在以下情况下提高数据库性能的提示 作为示例应用程序 我今天编写了一个相当简单的应用程序 它使用 Twitter 流 API 来搜索某些关键字 然后将结果存储在 MongoDB 中 该应用程序是用 Node js 编写的 我
  • Webpack 5 和 ESM

    我想我已经阅读了 SO 上的每个线程以及互联网上的每个相关页面 所有内容都有一些问题的变体 I want 使用 webpack 捆绑我的 Web 应用程序 在我的源 js 中使用 ES 模块并将它们转译为更广泛的浏览器支持 在我的 webp
  • 在 Angular 中使用异步管道设置选择元素的选定项目

    角度专家 我试图理解 Angular 中的异步管道 但我陷入了一个基本场景 我在用户界面中有两个选择元素 一个包含帖子 一个包含相关评论 我想将一个帖子 最后一个 设置为显示帖子的选择元素的最初选择的帖子 并且我想使用所选项目来过滤第二个选
  • 如何在 Express 4.0 中发送 Flash 消息?

    因此 我的 Web 应用程序需要身份验证 并且我有一个注册页面 如果用户尝试使用数据库中已有的电子邮件进行注册 我想向他们显示一条错误消息 我正在尝试在 html 端使用此代码来执行此操作 div class alert alert dan
  • 为什么打字稿编译器在生成的 JavaScript 中省略了“should.js”导入?

    我面临一个奇怪的问题 在我的 可以说 a ts我有
  • 在azure应用程序服务中使用docker-compose

    我的平均堆栈代码在 docker compose 配置中工作 如果我跑docker compose up在我的电脑上 然后我可以成功登录我的应用程序localhost如果转到应用程序服务并单击 docker compose 预览选项并上传我
  • 如何在没有 Express 的情况下通过 Mongoose 与 MongoDB 交互?

    我想要一个可以牢固掌握 CRUD 操作如何工作的环境 到目前为止 我一直在使用views看看数据是什么样子 但由于明显缺乏灵活性 这种方法并不是那么有洞察力 这就像在黑暗中开车一样 现在我希望能够通过 Mongoose 提供的功能来处理 M
  • 检查消息是否是 DM。 (Discord.js 和 Discord.js-commando)

    如何在 Discord js 中检查消息是否为私信 我尝试了几种方法来测试这一点 我尝试过以下方法 if msg channel isDM Produced undefined if msg isDM Produced undefined
  • 向结构指令添加多个输入

    我一直在关注如何使用结构指令的示例here https angular 2 training book rangle io handout advanced angular directives providing context vari
  • 是否可以从猫鼬文档中获取模型?

    var UserSchema new Schema Schema var User mongoose Model User UserSchema Model var user new User Document 仅给定文档 在本例中为用户
  • 我们可以使用 axios 的 onDownloadProgress 来加载 API 吗?

    我需要使用 axios 创建一个用于在 React 项目中加载 API 的进度条 我为此发现了 onDownloadProgress 函数 但我不知道我们是否可以使用它来获取诸如加载百分比之类的信息 或者它是否仅用于文件下载 所以我不确定我
  • 将 csv 解析输出保存到变量

    我是使用 csv parse 的新手 项目 github 中的这个示例满足了我的需要 但有一个例外 我不想通过 console log 输出 而是想将数据存储在变量中 我尝试将 fs 行分配给变量然后返回data而不是记录它 但这只是返回了
  • Typescript / Angular 2:类型中缺少属性

    我对 Typescript 还很陌生 并且很难理解界面 据我了解 接口是类型描述或类的契约 它允许我定义类可以具有哪些属性以及它们的类型 我尝试实现这一点 但总是收到此错误 error TS2420 Class ResultPage inc

随机推荐

  • 添加新的 ApplicationBarMenuItem 图标时无法分配给属性

    我添加了一个新的ApplicationBarMenu带有图标的按钮到我的 wp7 项目中的页面 当尝试运行页面时我得到 无法分配给属性 Microsoft Phone Shell ApplicationBarIconButton Click
  • 为量角器安装特定的 chromedriver

    我在 CircleCi 上运行的 chrome 驱动程序遇到问题 问题是运行时 node modules bin webdriver manager update 然后使用以下命令检查 chromedriver 和 selenium 的版本
  • html中的有什么用?

    看起来它允许您编辑元素的内容 但实际上发生了什么 这个属性有什么用呢 编辑 参见here http www w3 org TR html5 editing html contenteditable 这通常用于富文本输入 虽然常规表单元素如
  • Python 代码中标识符错误中的无效字符

    对于以下代码 我收到 标识符中的无效字符 错误 显示错误时 第 3 行中的 http 会突出显示 我是Python新手 请帮忙 import requests import html r requests get http cricapi
  • “找不到符号:方法”但该方法已声明

    在我的驱动程序中 这一行给了我cannot find symbol错误 我不知道为什么 该方法在SavingsAccount类 我可以引用我的驱动程序中的所有其他方法 但不是那个方法 我尝试将类型更改为double等但仍然无法正常工作 Ac
  • 是否可以在 C# 中观察 Rss feed 变化?

    我想创建一个服务来监听一些 Rss 提要并将新提要解析为 json 以供进一步使用 是否可以观察饲料的变化 如果可以 那么如何观察 thanks 查看System ServiceModel Syndicate SynminationFeed
  • 检查 Laravel 控制器中的多个守卫

    我在 laravel 中创建了三种类型的守卫 我可以检查身份验证用户 但我们有一些对所有用户都相同的路由和控制器 我需要为每种类型的登录用户检查相同路由或控制器中的所有守卫 我的 auth php 文件看起来像这样
  • 如何在ios中以编程方式安排事件?

    我的任务是编写一个应用程序 允许用户安排将来发送的电子邮件 用户从日期选择器中选择日期时间 撰写消息和收件人 然后安排事件 当日期 时间出现时 消息就会被发送出去 有人可以指导我如何安排日程安排吗 比如说短信 我知道如何发送短信 只是不确定
  • AWS lambda 基本身份验证,无需自定义授权者

    我在为用 Node js 编写的 AWS lambda 函数设置基本身份验证时遇到问题 问题 AWS lambda 函数是附加服务的代理 该函数仅转发整个请求并向用户提供整个响应 这就是为什么我需要强制使用Authentication标题
  • 理解同构字符串算法

    我理解以下代码来查找字符串是否同构 该代码使用两个哈希值s dict and t dict分别 我假设字符串的长度相同 def isIsomorphic s t s dict t dict for i in range len s if s
  • Flutter 中使用 BLoC 的异步请求

    我想下载数据 但也一直使用该应用程序 你能告诉我这是否是正确的解决方案 情况是我们按下下载按钮并调用函数 bloc dispatch Event download 在 Download 事件的 mapEventToState 中 我们请求数
  • Python 列表顺序

    在我编写的小脚本中 append 函数将输入的项目添加到列表的开头 而不是该列表的末尾 正如你可以清楚地理解的那样 我对 Python 很陌生 所以对我宽容一些 list append x 将项目添加到列表末尾 相当于a len a x 这
  • 如何捕获按下 HTML5 视频元素的默认全屏按钮时的全屏事件?

    我在使用 HTML5 时遇到问题video标签和iconic 这是我的模板的一部分
  • 将 .aar 和 .jar 文件嵌入库中

    我将创建一个包装许多蓝牙设备 SDK jar 和 aar 文件 的 android 库 aar 此文件无法在 Maven 或替代存储库中发布 点击这些链接 link1 https stackoverflow com a 60888941 5
  • 使用 PHP 将未知行数插入 MySQL

    我正在尝试使用 PHP 将未知数量的行插入到 MySQL 中 它应该是这样工作的 Javascript 解析 HTML DOM 以创建基于 css 类的多维数组 该数组将具有一定数量的行 或子数组 与具有该类的元素数量相对应 这可以是任何
  • 使用代码将 Google Apps 脚本函数分配给 Google 表格图像

    使用代码将 GOOGLE APPS 脚本功能分配给图像 通过单击 Google 表格中的图像并选择 分配脚本 选项 就可以实现这一点 但这是一项手动任务 我想将其自动化 可以将图像插入 Google 表格并使用 Apps 脚本代码分配函数
  • 如何在 Vaadin 7 表中实现滚动监听器

    在 Vaadin 中 当您在表格中向下或向上滚动时 com vaadin ui Table 不会触发任何事件来告诉您用户正在滚动 为什么我们需要在表格中滚动事件 我们先来看看 Vaadin 这个例子 仪表板演示 http demo vaad
  • 扩展会员提供者

    设想 构建一个供公司输入信息的应用程序 我需要扩展 ASP NET 中的内置成员资格提供程序 我的独特情况是 我已经拥有每家公司的人口统计信息 但没有网络应用程序的用户 ID 和密码 我想用人口统计信息预先填充数据库 向每个公司发送一个唯一
  • 使用另一个表中的唯一值创建一个表

    我正在使用 MS SQL Server Management Studio 我有桌子 Num ID Alpha ID 1 A 1 B 1 C 2 B 2 C 3 A 4 C 5 A 5 B 我想创建另一个包含该表中 2 列的表 以便 col
  • Angular 6 HttpClient - CORS 问题

    我的 Nodejs Restful 服务有以下端点http localhost 3000 api countries http localhost 3000 api countries 我正在使用这个中间件https github com