我有两个 VS 项目:一个公开 MVC5 控制器,另一个是 Angular 客户端。我希望角度客户端能够查询控制器。 我阅读了很多帖子并尝试了以下方法:
我将其添加到服务器的网络配置中:
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
<system.webServer>
我在控制器的操作上创建并使用了以下过滤器:
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
}
}
在角度客户端中,我创建了以下拦截器:
app.factory("CORSInterceptor", [
function()
{
return {
request: function(config)
{
config.headers["Access-Control-Allow-Origin"] = "*";
config.headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS";
config.headers["Access-Control-Allow-Headers"] = "Content-Type";
config.headers["Access-Control-Request-Headers"] = "X-Requested-With, accept, content-type";
return config;
}
};
}
]);
app.config(["$httpProvider", function ($httpProvider) {
$httpProvider.interceptors.push("CORSInterceptor");
}]);
根据 Firebug,这会导致以下请求:
OPTIONS //Login/Connect HTTP/1.1
Host: localhost:49815
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:50739
Access-Control-Request-Method: POST
Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
以及以下回复:
HTTP/1.1 200 OK
Allow: OPTIONS, TRACE, GET, HEAD, POST
Server: Microsoft-IIS/10.0
Public: OPTIONS, TRACE, GET, HEAD, POST
X-SourceFiles: =?UTF-8?B?RDpcVEZTXElVV2ViXEdhcE5ldFNlcnZlclxBU1BTZXJ2aWNlc1xMb2dpblxDb25uZWN0?=
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: *
Access-Control-Request-Headers: X-Requested-With, accept, content-type
Date: Tue, 01 Sep 2015 13:05:23 GMT
Content-Length: 0
Firefox 仍会阻止该请求,并显示以下消息:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:49815//Login/Connect. (Reason: missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).
我读到的帖子常常建议一些不必要的配置步骤,这会造成混乱。其实很简单...
为了从 Angular 客户端向 ASP 控制器发送跨站点请求的简单目的:
唯一的强制修改是将其添加到服务器的 web.config 中
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
</customHeaders>
</httpProtocol>
</system.webServer>
问题是,某些浏览器尚不允许使用
*
通配符来表示 Access-Control-Allow-Headers
。具体来说,Firefox 69 及更早版本没有。请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1309358。
因此,为了确保您在所有浏览器中获得正确的行为,您发送回的
Access-Control-Allow-Headers
值应明确列出您实际需要从前端代码访问的所有标头名称;例如,在问题中的情况下:Access-Control-Allow-Headers: Content-Type
。
无需对所有标头名称进行硬编码即可实现此目的的一种方法是:让服务器端代码获取浏览器发送的
Access-Control-Request-Headers
请求标头的值,并将其回显到 Access-Control-Allow-Headers
的值中您的服务器发回的响应标头。
或者使用一些现有的库来启用 CORS 您的服务器。将
Access-Control-Request-Headers
请求标头值回显到 Access-Control-Allow-Headers
响应标头值是大多数 CORS 库通常会为您做的事情。
我在 Angular 8 中尝试了 .net c# mvc 应用程序和客户端应用程序,但它不起作用。在 web.config 中,我添加了
<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
</customHeaders>
</httpProtocol>
还在 global.axax.cs 文件中,我添加了
void MvcApplication_AuthenticateRequest(object sender, EventArgs e)
{
Context.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
}
但它不起作用。在 chrome 中的响应标头中,它确实显示为:
访问控制允许标头:内容类型 访问控制允许来源:http://localhost:4200 访问控制允许来源:http://localhost:4200
但在请求标头中它显示为
访问控制请求标头:访问控制允许来源,内容类型,x-iphoneclientid
而它需要有喜欢
x-iphoneclientid:8E72FF50-548B
因为 x-iphoneclientid 是我在过滤器类中验证的令牌
protected override System.Threading.Tasks.Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
{
if (request == null || request.RequestUri == null)
{
return null;
}
// Write your Authentication code here
IEnumerable<string> monsterApiKeyHeaderValues = null;
// Checking the Header values
if (request.Headers.TryGetValues("x-iphoneclientid", out monsterApiKeyHeaderValues))
并且上述条件未找到,因此它会拒绝它并且不会到达控制器。
我什至在我的控制器中添加了以下内容
[启用Cors("","","*")]
请您指导一下吗
谢谢
我遇到了同样的问题,但其他答案对我不起作用,可能是由于正在使用更新的框架。以下是 Microsoft 的官方文档,介绍了截至 2023 年如何解决该问题https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0 下面是一个简短的解释。
在Program.cs文件中添加以下代码:
builder.Services.AddCors(options =>
{ options.AddPolicy(name: myAllowSpecificOrigins, policy => { policy.WithOrigins("https://localhost:44434"); }); }
);
app.UseCors(myAllowSpecificOrigins);
这将允许指定的端口发出跨域请求。如果本地主机地址不同,请务必将其替换为您正在使用的端口。将此代码正确放置在 Program.cs 文件中也很重要。
UseCors
必须放在 UseRouting
之后和 MapControllers
之前(有关更多详细信息和上下文示例,请参阅链接)。