首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 4/ Asp.net Web API -没有显示'Access-Control-Allow-Origin‘标头

Angular 4是一种流行的前端开发框架,而ASP.NET Web API是一种用于构建后端API的框架。当在Angular 4应用程序中使用ASP.NET Web API时,可能会遇到'Access-Control-Allow-Origin'标头未显示的问题。

这个问题是由于浏览器的同源策略引起的。同源策略要求浏览器只能向与当前页面具有相同协议、域名和端口的服务器发送请求。如果Angular 4应用程序和ASP.NET Web API不在同一个域上,浏览器会阻止跨域请求,并且不会显示'Access-Control-Allow-Origin'标头。

为了解决这个问题,可以在ASP.NET Web API的响应中添加'Access-Control-Allow-Origin'标头,并设置为允许访问Angular 4应用程序的域。可以使用以下代码在Web API的响应中添加标头:

代码语言:txt
复制
public HttpResponseMessage Get()
{
    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, data);
    response.Headers.Add("Access-Control-Allow-Origin", "http://your-angular-app-domain");
    return response;
}

在上面的代码中,将"http://your-angular-app-domain"替换为实际的Angular 4应用程序的域名。

另外,还可以使用ASP.NET Web API的CORS(跨域资源共享)中间件来处理跨域请求。可以在Web API的配置中添加以下代码启用CORS中间件:

代码语言:txt
复制
public static void Register(HttpConfiguration config)
{
    // 其他配置代码

    // 启用CORS中间件
    config.EnableCors();
}

启用CORS中间件后,可以在控制器或操作方法上使用[EnableCors]属性来指定允许访问的域。

关于Angular 4和ASP.NET Web API的更多信息和示例,可以参考以下链接:

  • Angular 4官方网站:https://angular.io/
  • ASP.NET Web API官方文档:https://docs.microsoft.com/en-us/aspnet/web-api/
  • 腾讯云相关产品:腾讯云服务器(https://cloud.tencent.com/product/cvm)、腾讯云API网关(https://cloud.tencent.com/product/apigateway)、腾讯云COS(https://cloud.tencent.com/product/cos)等。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用angular4asp.net core 2 web api做个练习项目(三)

它的地址是 http://localhost:5000 CoreApi.Web作为api, 都已经配置好了.它的地址是 http://localhost:5001 Login 登陆 由于我们使用的是Identity...Server 4的登录页面, 所以angular项目里面无需登录页面, 把login相关的文件删除..............没有的话, 则显示注册和登录. navbar.component.ts: import { Component, OnInit } from '@angular/core'; import { Router...以便切换导航栏的按钮显示情况. angular的部分先到这, 然后要 修改一个identity server的配置: 在VS2017打开AspNetIdentityAuthorizationServer...然后输入用户名密码登陆. 3.同意授权 点击yes 同意授权. 4.跳转回angular页面: 首先跳转回的是angular的login-callback路由, 然后瞬间回到了主页: 5.

1.3K80

ASP Net Core – CORS 预检请求

应用不会设置、、、或以外的请求 Accept Accept-Language Content-Language Content-Type Last-Event-ID 。...Content-Type(如果已设置)具有以下值之一: application/x-www-form-urlencoded multipart/form-data text/plain 对于简单的请求...,服务器必须仅通过添加以下标来允许源:“ Access-Control-Allow-Origin:*”, 收到预检请求后,浏览器将使用OPTIONS方法自动发送初始请求,以确定实际请求可以安全发送的请求...下面的示例显示,在不同来源运行的blazor 应用程序的调用将失败,因为服务器未发出“ Access-Control-Allow-Origin: ? Blazor App 请求API ? ?...并且对于我们的请求,我们还将指定Content-Type -- application/vnd.serilog.clef ? 第一个请求是“选项”请求: ? 第二个请求是我们的请求: ?

1.1K20

跨域资源共享(CORS)

这意味着使用这些APIWeb应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应 CORS机制支持安全的跨域请求以及浏览器和服务器之间的数据传输。...本文是对跨域资源共享的一般讨论,并包括对必要的HTTP的讨论。 功能概述部分 跨域资源共享标准的工作原理是添加新的HTTP,这些允许服务器描述允许哪些来源从Web浏览器读取该信息。...Origin的使用以Access-Control-Allow-Origin最简单的方式显示访问控制协议。...此外,设置了非标准的HTTP Ping-Other请求。此类不是HTTP / 1.1的一部分,但通常对Web应用程序有用。...但这不会失败:因为Access-Control-Allow-Origin的值是“ http://foo.example”(实际来源)而不是“ *”通配符,所以凭据识别内容将返回到正在调用的Web内容

3.5K50

.NET MVC第八章、Web Api 跨域接口

.NET MVC第八章、Web Api 跨域接口 ---- 目录 .NET MVC第八章、Web Api 跨域接口 创建Web Api项目 WebApi项目启动 主页中的API选项 ASP.NET...MVC WEB API操作 1、修改返回数据格式 2、修改访问路径 3、自定义API接口 创建自定义接口函数 启动访问 跨域配置 跨域访问测试 ---- 创建Web Api项目 在创建项目的时候需要选择...ASP.NET MVC WEB API操作 由于WebApi的单独的一个项目,它的默认配置不太合适咱们使用,我们要对默认设置做一些调整。...routeTemplate: "api/{controller}/{action}/{id}", 3、自定义API接口 依次选择【Web API】,【Web API 2控制器 - 空】,【添加】 输入控制器名称...如果接口没有进行跨域设置则会报错: Access-Control-Allow-Origin 在F12中如果看到这句话就代表接口没跨域。

52720

对不起,看完这篇HTTP,真的可以吊打面试官

若想要给显示的媒体类型增加优先级,则使用 q= 来额外表示权重值,没有显示权重的时候默认值是1.0 ,我给你列个表格你就明白了 q MIME 1.0 text/html 1.0 application/...由于这是一个简单的 GET 请求,因此不会进行预检,但是浏览器将拒绝任何没有 Access-Control-Allow-Credentials 的响应:为true,指的是响应不会返回 web 页面的内容...注意上面示例中的 Set-Cookie 响应还设置了另外一个值,如果发生故障,将引发异常(取决于所使用的API)。...,它类似于 Referer ,但与此不同,它没有公开整个路径。...客户端存储的现代 APIWeb 存储 API(localStorage 和 sessionStorage)和 IndexedDB。

6.3K21

JavaScrip最容易犯的十大错误及其避免方法()

我们将选择React,但不正确初始化的相同原则也适用于Angular,Vue或任何其他框架。...要获取真实的错误消息,请执行以下操作: 1.发送Access-Control-Allow-OriginAccess-Control-Allow-Origin设置为表示可以从任何域正确访问资源...以下是有关如何在各种环境中设置此的一些示例: Apache 在将从中提供JavaScript文件的文件夹中,使用以下内容创建.htaccess文件: Header add Access-Control-Allow-Origin...对于使用JavaScript命名空间的Web应用程序中的IE,这是一个常见问题。 在这种情况下,99.9%的问题是IE无法将当前命名空间中的方法绑定到this关键字。...即使没有Typescript,在使用它们之前使用guard子句来检查对象是否未定义也是有帮助的。

11810

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

) The easiest way of starting a new project using ABP with ASP.NET Core with Angular is to create a...开始一个新使用AngularASP.NET Core 的ABP项目最简单的方法就是通过官方的模板页面来生成模板。切记包含zero模块。...运行程序,如果成功将会显示 swagger-ui。 这里还有一点我要补充一下就是数据库连接需要根据实际情况进行修改,在‘Web.Host’工程项目下面的appsetting.json中。...关于多租户 默认情况下,api将作为主机用户工作。你可以把abp.tenantid的值指定一个特殊租户。默认情况下,默认的租户是一个整型值1。...如果没有专用数据库,或者它的数据库已经迁移到另一个租户(用于多个租户之间的共享数据库),它就会跳过该租户。

2.9K20

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案

此标准使用新的Origin请求和新的Access-Control-Allow-Origin响应扩展HTTP。它允许服务器使用明确列出可能请求文件或使用通配符的起源,并允许任何站点请求文件。...规范定义了一组,允许浏览器和服务器就允许(和不允许)哪些请求进行通信。CORS通过为所有人提供API访问来延续开放网络的精神。 CORS与JSONP的使用目的相同,但是比JSONP更强大。...如何使CORS生效 为了使CORS正常生效,我们可以添加HTTP,允许服务器描述允许使用Web浏览器读取该信息的一组源,并且对于不同类型的请求,我们必须添加不同的。...对于一个简单的请求,要使CORS正常工作,Web服务器应该设置一个HTTPAccess-Control-Allow-Origin: * 设置此意味着任何域都可以访问该资源。...对于预先发出的请求,要使CORS正常工作,Web服务器应设置一些HTTPAccess-Control-Allow-Origin: * Access-Control-Allow-Methods:

1.7K40

震惊 | HTTP 在疫情期间把我吓得不敢出门了

若想要给显示的媒体类型增加优先级,则使用 q= 来额外表示权重值,没有显示权重的时候默认值是1.0 ,我给你列个表格你就明白了 q MIME 1.0 text/html 1.0 application/...由于这是一个简单的 GET 请求,因此不会进行预检,但是浏览器将拒绝任何没有 Access-Control-Allow-Credentials 的响应:为true,指的是响应不会返回 web 页面的内容...注意上面示例中的 Set-Cookie 响应还设置了另外一个值,如果发生故障,将引发异常(取决于所使用的API)。...,它类似于 Referer ,但与此不同,它没有公开整个路径。...客户端存储的现代 APIWeb 存储 API(localStorage 和 sessionStorage)和 IndexedDB。

5.2K20
领券