开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从Angular HttpClient到ASP.NET Core2.2Web API的POST调用时出现404错误(启用CORS )

从Angular HttpClient到ASP.NET Core 2.2 Web API的POST调用时出现404错误（启用CORS）

问题描述：在使用Angular的HttpClient发送POST请求到ASP.NET Core 2.2 Web API时，出现了404错误（启用了CORS）。

解决方案：

确保ASP.NET Core 2.2 Web API已正确启用CORS。 CORS（跨源资源共享）是一种机制，允许不同域的网页请求访问其他域的资源。在ASP.NET Core中，可以通过中间件来启用CORS。确保在Startup.cs文件的ConfigureServices方法中添加以下代码来启用CORS：
确保ASP.NET Core 2.2 Web API已正确启用CORS。 CORS（跨源资源共享）是一种机制，允许不同域的网页请求访问其他域的资源。在ASP.NET Core中，可以通过中间件来启用CORS。确保在Startup.cs文件的ConfigureServices方法中添加以下代码来启用CORS：
并在Configure方法中使用以下代码启用CORS中间件：
并在Configure方法中使用以下代码启用CORS中间件：
在Angular应用程序的请求头中添加必要的CORS标头。在发送POST请求之前，确保在Angular应用程序中的请求头中添加必要的CORS标头。可以使用HttpClient的post方法，并使用{ headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }选项来设置请求头：
在Angular应用程序的请求头中添加必要的CORS标头。在发送POST请求之前，确保在Angular应用程序中的请求头中添加必要的CORS标头。可以使用HttpClient的post方法，并使用{ headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }选项来设置请求头：
确保ASP.NET Core 2.2 Web API中的路由和方法匹配。确保在ASP.NET Core 2.2 Web API中，路由和方法正确匹配。例如，在Controller中，确保路由和方法的特性与请求中的路由匹配。同时，也要确保方法的访问修饰符为[HttpPost]。
检查网络通信和服务器运维相关问题。如果上述步骤都正确无误，仍然出现404错误，可以考虑检查网络通信和服务器运维相关问题。确保网络通信畅通，API能够正常访问，并且服务器运维也没有出现任何问题。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发套件（Mobile）：https://cloud.tencent.com/product/mobile

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular 从入坑到挖坑 - HTTP 请求概览

对应官方文档地址： Angular HttpClient 配套代码地址：angular-practice/src/http-guide 二、Contents Angular 从入坑到弃坑 - Angular...使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览三、Knowledge Graph ?...，可以使用 post 方式调用 https://api.tryto.cn/djt/submit 进行毒鸡汤的提交 ?...(url, { data: '' }, this.httpOptions); } } 4.2、捕获错误信息 4.2.1、获取错误信息在涉及到前后端交互的过程中，不可避免会出现各种状况...，在出现错误时，可以在 subscribe 方法中，添加第二个回调方法来获取错误信息 getQuotes() { this.services.getAntiMotivationalQuotes(

5.3K1 0

或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧

ASP.NET Core Web API 中如何去使用，不会做过多的详细介绍。...对于耗时比较久的处理，一般用异步处理来完成 204 No Content 此状态可能会出现在 PUT、POST、DELETE 的请求中，一般表示资源存在，但消息体中不会返回任何资源相关的状态或信息 400...403 Forbidden 当前的资源被禁止访问 404 Not Found 找不到对应的信息 500 Internal Server Error 服务器内部错误　　我们知道 HTTP 共有四个谓词方法...，分别为 Get、Post、Put 和 Delete，在之前我们可能更多的是使用 Get 和 Post，对于 Put 和 Delete 方法可能并不会使用。...HTTP 状态码为 200 或是 400，当状态码为 200 时，代表数据获取成功，接口可以正常返回数据，当状态码为 400 时，则代表接口访问出现问题，此时则返回错误信息对象。

1.2K2 0

或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧

ASP.NET Core Web API 中如何去使用，不会做过多的详细介绍。...对于耗时比较久的处理，一般用异步处理来完成 204 No Content 此状态可能会出现在 PUT、POST、DELETE 的请求中，一般表示资源存在，但消息体中不会返回任何资源相关的状态或信息 400...403 Forbidden 当前的资源被禁止访问 404 Not Found 找不到对应的信息 500 Internal Server Error 服务器内部错误　　我们知道 HTTP 共有四个谓词方法...，分别为 Get、Post、Put 和 Delete，在之前我们可能更多的是使用 Get 和 Post，对于 Put 和 Delete 方法可能并不会使用。...HTTP 状态码为 200 或是 400，当状态码为 200 时，代表数据获取成功，接口可以正常返回数据，当状态码为 400 时，则代表接口访问出现问题，此时则返回错误信息对象。

1.4K4 0

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api....web api的规范, 注意controller 的路由地址....('file', photo); return this.http.post(`/api/tvshows/${tvShowId}/photoes`, formData); } } 其中post...如果照片没有显示出来, 可能是asp.net core没有启用静态文件到支持, 在Startup.cs添加这句话即可: using System; using System.Collections.Generic...(`/api/tvshows/${tvShowId}/photoes`, formData); const req = new HttpRequest('POST', `/api/

2.9K5 0

ASP.NET Core | 笔记

Core 中启用跨域参考: 在 ASP.NET CORE 中 (CORS) 跨 ASP.NET Core | Microsoft Docs 同一源如果两个 URL 具有相同的方案、主机和端口，则它们具有相同的源...example.com:9000/foo.html：不同的端口启用 CORS 有三种方法可以启用 CORS：在使用命名策略或默认策略的中间件中。...请考虑以下代码，该代码使用终结点路由来启用 CORS： // OPTIONS: api/TodoItems2/5 [HttpOptions("{id}")] public IActionResult PreflightRoute...将所有 Microsoft.EntityFramework 包从 5.0.0 降级到 3.1.10 以修复错误。...nuget SetApiKey Your-API-Key 将主包发布到 nuget.org 后，按如下方式推送符号包。

4.6K2 0

Angular进阶教程2-

Angular 给应用提供了一个 HTTP 客户端 API，也就是 @angular/common/http\color{#0abb3c}{@angular/common/http}@angular/common...从服务器请求数据 HttpClient.get() // 在服务类中去封装和服务端通讯的方法 public getHttpResult(code: string, name: string..._http.get(url, { params: { code, name } }); } 复制代码发送数据到服务器 HttpClient.post() public postHttpResult..._http.post(url, body); } 复制代码错误处理在调用接口的时候，当遇到接口请求失败或者报错的时候，前端需要做一些错误的提示信息展示，具体操作如下： this....，函数调用时，observer.next 来执行在observer 中定义的行为，比如上述示例中的counter++。

4.1K3 0

ASP.NET WebAPI构建API接口服务实战演练

王小二顿到感觉无与伦比的器重和自豪感，于是晚上回家撸起键盘就是一顿baidu+google搜索，最后惊奇地发现了一本叫《ASP.NET WebAPI构建API接口服务实战演练》葵花宝典。...二、手把手教会用ASP.NET WebAPI构建API接口服务 2.1、与Web API的第一次亲密接触，"奇葩"的默认路由配置王小二刚兴致勃勃打开葵花宝典手册，一上来就遇到404访问不了情况。...对于ASP.NET Web API内部实现来讲，我们的请求最终将定位到一个具体的Action上。所以说，ASP.NET Web API路由就是把客户端请求映射到对应的Action上的过程。...2.3、Web API "奇葩"的参数传递,看着一招就够了王小二好不容易把输出格式四不像问题解决了，但是在使用POST多传递几个参数的情况下，就要注意[FromUri] ,[FromBody]带来的限制...2.5、ASP.NET WebApi标准格式化统一输出异常报文数据王小二总算解决了标准格式化统一输出响应报文数据，正兴高采烈的调试第一个接口的时候，却出现了Exception这个程序员恶魔，只好无奈的看着屏幕前一堆红色的错误输出页面

1.1K2 0

Asp.Net Web API 2第五课——Web API路由

API http://www.cnblogs.com/aehyok/p/3439698.html Asp.Net Web API第四课——HTTPClient消息处理器 http://www.cnblogs.com.../aehyok/p/3441915.html 前言本文描述了 ASP.NET Web API 如何将 HTTP 请求路由到控制器。...当Web API接收到一个请求的时候，它将这个请求路由到一个Action。　　为了确定那个Action被调用，这个框架使用了一个路由表。...如果无路由匹配，客户端会接收到一个404（未找到）错误。...另外要注意，POST请求是失败的，因为该控制器未定义“Post…”方法。 Routing Variations路由变化上一节描述了ASP.NET Web API基本的路由机制。

1.2K5 0

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

'Barryvdh\Cors\Middleware\HandleCors' 通过使用 php artisan vendor:publish 命令发布这配置到一个本地config/cors.php 文件中...当我们向一个API 服务器（ server），如 api.jwt.dev/v1/restricted发出POST请求时，我们正在进行跨域请求，并且必须在后端启用CORS。...在进行AJAX调用时，要获得一些视觉反馈，我们将使用angular-loading-bar script来拦截XHR请求并创建一个加载栏。 ...它将用户名和密码数据从登录表单和注册表单传递Auth到向后端发送HTTP请求的服务。然后将token保存到本地存储，或者显示错误消息，具体取决于后端的响应。...它发出请求，并将成功和错误回调委托给控制器。

30.6K1 0

ASP.NET Core 3.0 的新增功能

有关更多信息，请参见Kestrel - 从 ASP.NET Core 2.2 迁移到 3.0。默认启用 HTTP/2 默认情况下，Kestrel 中为 HTTPS 端点启用了 HTTP/2。...终结点和中间件与其他基于 ASP.NET Core 的技术（例如运行状况检查）进行良好的编排。终结点可以在中间件和 MVC 中实现各种策略，例如 CORS 或者授权等。...要求 CORS。...IIS 中改进了的错误报告现在，在 IIS 中托管 ASP.NET Core 应用程序时的启动错误会生成更丰富的诊断数据。这些错误会在适用的情况下使用堆栈跟踪，报告给 Windows 事件日志。...有关迁移的更多信息，请参见将代码从 .NET Framework 移植到 .NET Core。

6.7K3 0

在 REST 服务中支持 CORS

概述本节提供 CORS 的概述以及如何在 IRIS REST 服务中启用 CORS 的概述。CORS 简介跨域资源共享 (CORS) 允许在另一个域中运行的脚本访问服务。...通常，当浏览器从一个域运行脚本时，它允许对同一个域进行 XMLHttpRequest 调用，但在对另一个域进行调用时不允许它们。此浏览器行为限制某人创建可滥用机密数据的恶意脚本。...但是，可以启用 CORS 支持。在 REST 服务中启用对 CORS 的支持有两个部分：启用 REST 服务以接受部分或所有 HTTP 请求的 CORS 标头。。...此用户应具有 REST 服务使用的任何数据库的 READ 权限；如果没有，服务将响应 HTTP 404 错误。...最终结果是调度类从自定义类而不是从 %CSP.REST 继承，因此使用对 OnHandleCorsRequest() 的定义，它覆盖了默认的 CORS 标头处理。

2.6K3 0

【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

.NET Core SDK预览版】升级现有项目将现有的ASP.NET Core应用程序升级到.NET Core 3.0 Preview 3，请按照ASP.NET Core文档中的迁移步骤进行操作。...Razor组件在HTML中是完全呈现的。 Razor类库中的Razor组件现在可以将Razor组件添加到Razor类库中，并使用Razor组件从ASP.NET核心项目引用它们。...运行时验证对运行时编译的支持已从.NET Core 3.0中的ASP.NET核心共享框架中删除，但现在可以通过向应用程序添加包的方式来启用它。...在本节中，我们将展示如何创建一个新的Angular或React模板，该模板允许我们对用户进行身份验证并访问受保护的API资源。...Angular模块所构建的身份验证和授权支持，可以导入到您的应用程序中，并提供一套组件和服务来增强主应用程序模块的功能。

22.6K1 0

Node.js-具有示例API的基于角色的授权教程

使用Node.js构建的教程其他可用版本： ASP.NET: ASP.NET Core 3.1, ASP.NET Core 2.2 在本教程中，我们将通过一个简单的示例介绍如何在JavaScript...示例API仅具有三个端点/路由来演示身份验证和基于角色的授权： /users/authenticate - 接受body中带有用户名和密码的HTTP POST请求的公共路由。...使用基于Node.js角色的Auth API运行Angular 9客户端应用有关示例Angular 9应用程序的完整详细信息，请参阅Angular 9 - Role Based Authorization...1.从https://github.com/cornflourblue/angular-9-role-based-authorization-example下载或克隆Angular 9教程代码 2.通过从项目根文件夹...的入口点，它配置应用程序中间件，将控制器绑定到路由并启动api的Express Web服务器。

5.7K1 0

Asp.net web api 知多少

由于个人技术水平和英文水平也是有限的，因此错误在所难免，希望大家多多留言指正。 Q1. 什么是REST? Ans....RepresentationOriented（面向表述） - 资源的表现形式可以交换的。GET用来获取资源的某种表现形式，POST用来传递资源到服务器以至于底层资源能够被改变。...比如：twitter，facebook，Google Api都支持web应用程序和手机app。 WEB API是一个很棒的框架用来暴露你的数据和服务到不同的设备。...ASP.NET WEB API 可以通过使用HttpClient请求WEB API地址的方式来调用： public class ProductController : Controller { HttpClient...不像ASP.NET MVC，Web API仅能接收一个复杂类型作为参数。 Q14. ASP.NET WEB API2中如何启用特性路由？ Ans.

4.8K5 0

【ASP.NET Core 基础知识】--前端开发--集成前端框架

以下是 Vue.js 的一些主要特点：简洁易用： Vue.js 的 API 简单、直观，容易学习和上手。它提供了清晰的文档和友好的错误提示，使开发者能够快速入门并高效开发应用。...ng build --prod 将构建后的文件部署到 ASP.NET Core 项目：将 Angular 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot...配置 ASP.NET Core 以提供静态文件：在 ASP.NET Core 项目的 Startup.cs 文件中的 Configure 方法中添加以下代码来启用静态文件服务。...ConfigureServices 方法中添加以下代码以启用 Web API 路由。...配置域名和 SSL 证书：如果有自定义域名，确保将域名解析到务器 IP 地址，并配置 SSL 证书以启用 HTTPS 加密连接。

1420 0

从头编写 asp.net core 2.0 web api 基础框架 (1)

我一直在关注asp.net core 和 angular 2/4, 并在用这对开发了一些比较小的项目....例如angular就是一个客户端的MVC模式. 在Web api里面的View就是指数据或者资源的展示, 通常是json....常用的Http Method有: Get, 查询, Attribute: HttpGet, 例如: '/api/product', '/api/product/1' POST, 创建, HttpPost...因为框架找到了匹配uri的action, 所以不会返回404, 但是我们如果找不到数据的话, 应该返回404错误才比较好....验证成功, 但是没法访问相应的资源 404: Not Found 409: 有冲突 Conflict. 500: Internal Server Error, 服务器发生了错误.

2.1K7 0

dotnet 用 MVC 的方式打开 IPC 命名管道

让 ASP.NET Core 从走网络的方式，替换为走命名管道的方式，可以极大提升在用户端的稳定性再次表扬 ASP.NET Core 的优秀设计，在 ASP.NET Core 里，各个模块分层明确，这也就让更换...ASP.NET Core 里的“通讯传输”（其实本意是 IServer 层）这个工作十分简单在采用 ASP.NET Core 作为 IPC 的顶层调用时，那此时的通讯方式一定就是服务端-客户端的形式...] IpcPipeMvcServer://api/Foo {response.StatusCode} {m}"); } 运行效果如下图如上图可以看到客户端成功采用 POST 方法请求到服务端...参数传给服务端以上就是 GET 和 POST 的例子，几乎看不出来加上 IPC 前后对 ASP.NET Core 应用调用的差别，除了要求需要使用特定的 HttpClient 对象之外，其他的逻辑都相同...等收到服务端的返回值之后，封装成为 HttpResponseMessage 返回值，让此返回值接入到 HttpClient 的机制框架，从而实现调用 HttpClient 发送的请求是通过 dotnetCampus.Ipc

9682 0

（翻译）开始使用ABP.CORE模板 (ASP.NET Core with Angular)

开始一个新使用Angular和 ASP.NET Core 的ABP项目最简单的方法就是通过官方的模板页面来生成模板。切记包含zero模块。...就翻译到这里把，因为npm编译出现错误，一时半会也解决不了。 ?...这里写图片描述很明显我的样式出现了问题，后面再解决。继续翻译。正常的应该是这样的 ?...部署Angular项目我们用 angular-cli 工具来生成Angular解决方案，你可以用ng build 指令来发布你的工程项目，发布内容默认放在dist文件夹下，然后你可以将这个文件夹部署到...这个应用程序从主机的appsettings.json文件中获取连接字符串。开始它和Web.Host中的appsettings.json文件一样。确保在配置文件中的连接字符串是要数据库。

2.9K2 0

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

document 浏览器的document元素的jQuery包装 $rootScope 根作用域的访问 $rootElement 根元素的访问 $cacheFactory 提供键/值对放置到对象缓存 $...jsonp(url,[config]) 发送通过jsonp实现跨域的同步请求的请求 post(url,data,[config]) 发送谓词为post的异步请求 put(url,data[config...Angular的post和put请求Content-Type: application/json默认情况下，jQuery传输数据使用Content-Type: x-www-form-urlencodedand...module.value(“key”,”value”); 1.2.3、创建factory服务提供了把功能实现到服务中的能力。也可以把其它服务注入到factory中。 ?...3.2、JSON相关API ? 3.3、数据比较API ? 四、jQuery Lite jQuery Lite只是jQuery的一个简化版本，它直接内置于AngularJS中。

6.1K3 0

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

document 浏览器的document元素的jQuery包装 $rootScope 根作用域的访问 $rootElement 根元素的访问 $cacheFactory 提供键/值对放置到对象缓存 $...jsonp(url,[config]) 发送通过jsonp实现跨域的同步请求的请求 post(url,data,[config]) 发送谓词为post的异步请求 put(url,data[config...Angular的post和put请求Content-Type: application/json默认情况下，jQuery传输数据使用Content-Type: x-www-form-urlencodedand...module.value(“key”,”value”); 1.2.3、创建factory服务提供了把功能实现到服务中的能力。也可以把其它服务注入到factory中。 ?...3.2、JSON相关API ? 3.3、数据比较API ? 四、jQuery Lite jQuery Lite只是jQuery的一个简化版本，它直接内置于AngularJS中。

6.3K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭