CORS-跨域问题:Access-Control-Allow-Origin Header and the ASP.NET Web API
代码控制跨域:
如何使用:在 Global.asax 对应的控制类中:
protected void Application_BeginRequest()
{
if (CorsFilter.IsOptionstRequest())
{
CorsFilter.AllowCors();
return;
}
}
/// <summary>
/// 允许跨域请求标识
/// </summary>
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = true)]
public class CorsAttribute : Attribute
{
public CorsAttribute()
{
this.Enabled = true;
}
/// <summary>
/// 是否启用,默认:true
/// </summary>
public bool Enabled { get; set; }
}
public class CorsFilter : ActionFilterAttribute
{ public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var request = filterContext.RequestContext.HttpContext.Request;
var response = filterContext.RequestContext.HttpContext.Response; try
{
//判断是否支持跨域
CorsAttribute corsAttribute = null;
corsAttribute = filterContext.Controller.GetType().GetCustomAttributes(typeof(CorsAttribute), true).FirstOrDefault() as CorsAttribute; if (null == corsAttribute)
{
ActionDescriptor actionDescriptor = filterContext.ActionDescriptor;
corsAttribute = (CorsAttribute)actionDescriptor.GetCustomAttributes(typeof(CorsAttribute), true).FirstOrDefault() ??
(CorsAttribute)actionDescriptor.GetCustomAttributes(typeof(CorsAttribute), true).FirstOrDefault(); } if (corsAttribute != null&&corsAttribute.Enabled==true)
{
//添加制定heads
AllowCors();
} }
catch (Exception ex)
{
} base.OnActionExecuting(filterContext);
} /// <summary>
/// 允许跨域请求-注册请求头信息
/// </summary>
public static void AllowCors()
{
var req = HttpContext.Current.Request; //options请求
var originName = req.Headers["Origin"];
string originHost = new Uri(originName).Host; //从配置文件检索放行的跨域domains
var allowCorsDomians=Config.Instance["CORSAllowDomians"]?.Split(",", StringSplitOptions.RemoveEmptyEntries);
if (allowCorsDomians.IsEmpty() || !allowCorsDomians.Contains(originHost))
{
///_logger.Error("444444444444444444444*******"+ allowCorsDomians.ToJsonString()+"$$$$$"+ originHost); return;
} SetResponseHeaders(); if (IsOptionstRequest())
{
HttpContext.Current.Response.End();
HttpContext.Current.Response.Flush();
} return;
} private static void SetResponseHeaders()
{ var req = HttpContext.Current.Request;
var rsp = HttpContext.Current.Response;
var requestHeader = req.Headers; string origin = requestHeader.GetValues("Origin").FirstOrDefault();
Dictionary<string, string> headers = new Dictionary<string, string>(); headers.Add("Access-Control-Allow-Origin", origin);
////headers.Add("Access-Control-Allow-Headers", "Content-Type");
headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
headers.Add("Access-Control-Allow-Credentials", "true");
string requestHeaders = requestHeader.GetValues("Access-Control-Request-Headers")?.FirstOrDefault();
if (!string.IsNullOrEmpty(requestHeaders))
{
headers.Add("Access-Control-Allow-Headers", requestHeaders);
}
else
{
headers.Add("Access-Control-Allow-Headers", "Content-Type");
} foreach (var item in headers)
{
rsp.Headers.Add(item.Key, item.Value);
}
} /// <summary>
/// 是否是 options 预请求
/// </summary>
/// <returns></returns>
public static bool IsOptionstRequest()
{ var req = HttpContext.Current.Request; var requestHeader = req.Headers; bool result = (req.HttpMethod == "OPTIONS" &&
requestHeader.AllKeys.Contains("Origin") &&
requestHeader.AllKeys.Contains("Access-Control-Request-Method")); return result;
} }
Access-Control-Allow-Origin Header and the ASP.NET Web API
In this article we are going to look at few possible fixes we can apply when we get an error “Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:58018’ is therefore not allowed access.” We get this error when we are trying to get some data from another origin, like an AJAXcall. In this post, we will discuss the solutions for this error in detail and we will also discuss Cross Origin Requests. Here I am going to use Visual Studio 2015, Web API 2. I hope you will like this.
Background
I hosted my Web API in a server, and what that API does is, it will just return the data in JSONformat. But when I try to consume this Web API via an Ajax call, I was getting the error “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. I solved the same issues in different ways. Here I am going to share those.
Using the Code
I assume that you have created a Web API and hosted it on your server. If you are new to Web API, you can always get some information from here Articles Related To Web API.
We all will have some situations where we need to fetch some data from another domain or another site, right? If it is from the same site, you won’t be facing any issues at all. Like you are calling an Ajax call from the page www.SibeeshPassion.com/Receiver.html to www.SibeeshPassion.com/Sender.html to get the data, here the origin is same, and therefore, you will get the data. What happens is when the sender and receiver is not in the same origin, like you need to get the data from www.Microsoft.com by an Ajax call in www.SibeeshPassion.com/Receiver.html, the browser will not allow you to get the sensitive data from other domain, for the security purpose your browser will return you “No ‘Access-Control-Allow-Origin'.” To overcome this, we have something called Cross-Origin Resource Sharing (CORS). Basically the process of allowing other sites to call your Web API is called CORS. According to W3 Org CORS is a standard which tells the server to allow the calls from other origins given. It is much secured than using JSONP(Previously we had been using JSON for getting the data from other domains.).
Fix To No Access-Control-Allow-Origin Header is Present
We can fix this issue in two ways,
- By using Microsoft.AspNet.WebApi.Cors
- By adding header information in Web.config
We will explain both now.
By Using Microsoft.AspNet.WebApi.Cors
To work with this fix, you must include the package By using Microsoft.AspNet.WebApi.Cors from Manage Nuget window.
CORS_In_Manage_NuGet_Package
Now got to App_Start folder from your solution. Then click on the file WebApiConfig.cs, this is the file where we set the configuration for our Web API.
Web_API_Config_Class_File
Then you can add the preceding codes in the static function Register
.
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
If you do this, the CORS will be applied globally for all the Web API controllers you have. This is the easiest way of doing it. Now if you want to see the metadata of EnableCorsAttribute
, you can see find it below.
// Summary:
// Initializes a new instance of the System.Web.Http.Cors.EnableCorsAttribute class.
//
// Parameters:
// origins:
// Comma-separated list of origins that are allowed to access the resource. Use
// "*" to allow all.
//
// headers:
// Comma-separated list of headers that are supported by the resource. Use "*" to
// allow all. Use null or empty string to allow none.
//
// methods:
// Comma-separated list of methods that are supported by the resource. Use "*" to
// allow all. Use null or empty string to allow none.
public EnableCorsAttribute(string origins, string headers, string methods);
As it is mentioned, it accepts the parameters origins, headers, methods. Here we pass *
to all the three parameters to make everything to be allowable.
You can also try the same as below in the Register function. Here we are going to apply CORS for a particular controller, which means it will be applied to all the actions in the controller. Before that make sure you have added the preceding code in your WebApiConfig.cs file
config.EnableCors();
And in the API controller, you need to set the origins, headers, methods as preceding.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Runtime.Serialization;
using System.Text;
using System.Web;
using System.Web.Http.Cors;
namespace APIServiceApplication.Controllers
{
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class DefaultController : ApiController
{
}
}
Make sure that you have added namespace using System.Web.Http.Cors; to use CORS. You can always disable CORS in an action by using [DisableCors].
namespace APIServiceApplication.Controllers
{
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class DefaultController : ApiController
{
[DisableCors]
public string XMLData(string id)
{
return "Your requested product" + id;
}
}
}
Here we have disabled CORS for the action XMLData. And again if you need to apply CORS only in a single action, you can do that as follows.
namespace APIServiceApplication.Controllers
{
public class DefaultController : ApiController
{
[EnableCors(origins: "*", headers: "*", methods: "*")]
public string XMLData(string id)
{
return "Your requested product" + id;
}
}
}
I hope you are aware of how to enable CORS now.
By Adding Header Information in Web.config
Another fix we can do is that add some tags to our Web.config file.
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" /> <add name="Access-Control-Allow-Credentials" value="true" /> </customHeaders> </httpProtocol> </system.webServer>
As you can see we have added keys with value for the listed items.
- Access-Control-Allow-Origin (For Origin)
- Access-Control-Allow-Headers (For Headers)
- Access-Control-Allow-Methods (For Methods)
Now if you go to your server and check, you can see that all the things are configured perfectly. I have configured my API in my server IIS, so I am going to see my Response Header settings in IIS.
Go to the command window and type inetmgr and click OK, your IIS will be opened shortly, now find your Web API which you have already configured under Default Web Site. Before doing this, please make sure that you have configured IIS in your windows. If you don’t know how to configure, I strongly recommend you to read Configure IIS in Windows.
Configured_Web_API_in_IIS
Go to Features View and double click on HTTP Response Headers under IIS category.
HTTP_Response_Headers_In_IIS
You can see all the settings has been configured there.
HTTP_Response_Headers_Available
That’s all, now if you run your application, you will be able to fetch the data from your Web API.
CORS-跨域问题:Access-Control-Allow-Origin Header and the ASP.NET Web API的更多相关文章
- SpringBoot添加Cors跨域配置,解决No 'Access-Control-Allow-Origin' header is present on the requested resource
目录 什么是CORS SpringBoot 全局配置CORS 拦截器处理预检请求 什么是CORS 跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netsc ...
- 通过扩展让ASP.NET Web API支持W3C的CORS规范
让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...
- 通过扩展让ASP.NET Web API支持W3C的CORS规范(转载)
转载地址:http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-04.html CORS(Cross-Origin Resource Shari ...
- CORS 跨域 实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
- CORS跨域实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
- JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]
[第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- jsonp与cors跨域的一些理解(转)
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- 在ASP.NET Web API中实现CORS(跨域资源共享)
默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...
随机推荐
- 【TTS】传输表空间Linux asm -> AIX asm
[TTS]传输表空间Linux asm -> AIX asm 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌 ...
- React: 无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...
- 第一次使用Git(常用的dos命令整理)
在使用git的过程中,有许多dos命令也要会用才行 Git 工具分类 命令行 bash.cmd.power shell GUI Git GUI.GitHub Desktop IDE 集成 Visual ...
- tkinter改进了随机显示图片
随机显示,还加了圆圈,这样感觉更好点. from django.test import TestCase # Create your tests here. import random import ...
- 使用Apache commons-maths3-3.6.1.jar包,在hive上执行获取最大值的操作
udf是对hive上的每行(单行)数据操作,现在我要实现对hive上的一列数据操作,udf函数已经满足不了我的要求了,使用udaf对hive的一列求最大值: 代码如下: package com; im ...
- idea常用设置汇总
https://www.cnblogs.com/wangmingshun/p/6427088.html
- StringTokenizer字符串分解器
示例: StringTokenizer st = new StringTokenizer(key, ",", false); while (st.hasMoreTokens()) ...
- WebPack探索之路(1)
1. 卸载全局的webpack npm ininstall webpack webpack-cli -g 其中安装webpack-cli 是可以让webpack在命令行中执行.在webpack4.0中 ...
- exception内置对象
当当前页面可能发生异常的时候,此页面将此异常交给另外一个页面处理 在page处添加 errorPage="处理异常的页面.jsp" 在异常处理的页面的page处应该添加 i ...
- 斜率优化板题 HDU 3507 Print Article
题目大意:输出N个数字a[N],输出的时候可以连续的输出,每连续输出一串,它的费用是 "这串数字和的平方加上一个常数M".n<=500000 我们设dp[i]表示输出到i的时 ...