ASP.NET MVC中设置跨域

1、什么是跨域请求

js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错。这是JS的同源策略限制,JS控制的并不是我们网站编程出现了问题。客户端(网页)和后台编程都可以有效解决这个问题。客户端可以通过JSONP来完成跨域访问;在ES6中为了解除同源策略问题,想出一个办法:当被请求网站为响应头respone添加了一个名为Access-Control-Allow-Origin的header,设置其值等于发起请求网站的域名地址的话,这次请求被视为允许。其中Access-Control-Allow-Origin的值为*时表示允许所有网站的跨域请求。

2、程序中添加Header头允许客户端跨域请求

这里有很多方法可以方法可以在返回数据时添加header头。

请注意:同名Header可以有多个 ,但是运行时使用的是第一个,addHeader添加时,如果同名header已存在,则追加至原同名header后面(不起作用),setHeader,如果同名header已存在,则覆盖一个同名header。

在action中添加代码

HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*");

在webconfig添加应用程序配置:

<system.webServer>
<httpProtocol>
<customHeaders>
<!-- 先移除后添加,确保起作用 -->
<remove name="Access-Control-Allow-Origin" />
<remove name="Access-Control-Allow-Headers" />
<remove name="Access-Control-Allow-Methods" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>

添加action过滤器

不论webapi还是mvc的action,我们都可以重写ActionFilterAttribute过滤器的OnException方法来在action执行完成之后,为http响应添加header头;OnException方法意为在action执行完成之后进行的操作。这个过滤器可以添加在action或者controller上,但是这样就要为每一个action或者controller打上这个过滤器,这里将我们重写的action过滤器添加在了全局的过滤器中,这样,每一个action在执行完成之后都会触发这个过滤器,这里以webapi为例。新建类:

    /// <summary>
/// 跨域
/// </summary>
public class Cores:ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
base.OnActionExecuted(actionExecutedContext);
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin","*");
}
}

代码中注册过滤器

    public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
// 将 Web API 配置为仅使用不记名令牌身份验证。
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); // Web API 路由
config.MapHttpAttributeRoutes();
config.Filters.Add(new Cores());
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}

在Starpup.cs类中设置header头

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Owin;
using Owin;
using System.Web; [assembly: OwinStartup(typeof(WebApiTest.Startup))] namespace WebApiTest
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
// 不能使用这种方式添加必须使用app的相应方法或者中间件实现
// HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); //app.UseWebApi();
app.Use(async (context,next)=> {
context.Response.Headers.Set("Access-Control-Allow-Origin", "*");
await next();
});
}
}
}

startup.cs类是应用启动类,我本来以为直接在方法中直接把HttpContext.Current.Response.AddHeader添加一个头就行了,但是发现不行,必须通过参数app才能成功设置响应头,后来我才知道,这个startup.cs类远不止看到的那么简单!拿出来可以当作好比一本书的一个章节来讲了!以后再深入了解这个类。

3、引入Script标签获取数据

一些JSONP之类的客户端跨域请求就不说了,最近发现了构造Script标签也可以作为获取数据的方法,很开心。

即使服务端不设置允许跨域的header头,js也可以变通获取数据,不过仍然需要服务端的配合。

这个原理是;当通过script标签的src地址引入某个资源的JS代码的时候,就相当于src地址的JS代码直接就在本地一样。相应的,其他地址的js变量也会引入当前页面
比如百度地图的JsAPI
比如雅虎获取IP地址的接口
接口:http://pv.sohu.com/cityjson
返回JS代码:var returnCitySN = {"cip": "115.238.95.194", "cid": "330100", "cname": "浙江省杭州市"};
页面引入
<script src="http://pv.sohu.com/cityjson"></script>
然后console.log(returnCitySN)可以直接使用。
这就提供了思路,

var script = document.createElement("script"),
script.src = "http://pv.sohu.com/cityjson";
script.onload=()=>{
console.log(returnCitySN);
}

但是缺点是,服务端必须返回的是JS代码。

ASP.NET MVC中设置跨域的更多相关文章

  1. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  2. Asp.Net MVC 中实现跨域访问

    在ASP.Net webapi中可以使用  Microsoft.AspNet.WebApi.Cors  来实现: public static class WebApiConfig { public s ...

  3. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  4. 第十四节:Asp.Net Core 中的跨域解决方案(Cors、jsonp改造、chrome配置)

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  5. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  6. ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS)

    ylbtech-ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS) 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. ...

  7. 在 ASP.NET Core 中启用跨域请求(CORS)

    本文介绍如何在 ASP.NET Core 的应用程序中启用 CORS. 浏览器安全可以防止网页向其他域发送请求,而不是为网页提供服务. 此限制称为相同源策略. 同一源策略可防止恶意站点读取另一个站点中 ...

  8. ASP.NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  9. ASP.NET MVC中防止跨站请求攻击(CSRF)

    转载   http://kevintsengtw.blogspot.co.nz/2013/01/aspnet-mvc-validateantiforgerytoken.html 在 ASP.NET M ...

随机推荐

  1. Java中Generics的使用

    1.Java的Generics与C++的Template由于Java的Generics设计在C++的Template之后,因此Java的Generics设计吸取Template的很多经验和教训.首先, ...

  2. phpStudy2——PHP脚本访问MySql数据库

    前言: 前边介绍了php脚本获取并打印输出html提交的数据,本文将介绍php脚本访问查询MySql数据库. 示例代码: <style> td{width:100px;}/*我的存在只为证 ...

  3. 鼠标经过的图片高亮显示,其余变暗效果[xyytit]

    初始代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. 对ubuntu初学感想

    感觉对ubuntu一头雾水...作为什么都不懂得小菜鸟,感觉以后还有很多要学习的.fighting

  5. 无法更新 EntitySet 因为它有一个 DefiningQuery

    DbFirst 使用 MVC+EF+仓储+ADO.NET实体数据模型 无法更新 EntitySet“Book”,因为它有一个 DefiningQuery definingqueryentityfram ...

  6. Castle ActiveRecord学习(五)使用HQL语句查询

    来源:http://www.cnblogs.com/Terrylee/archive/2006/04/12/372823.html 一.HQL简单介绍HQL全名是Hibernate Query Lan ...

  7. Car 加油

    package com.hanqi; public class Car { //属性 成员变量 //车的颜色 String YanSe; //车的品牌 String PinPai; //邮箱容量 do ...

  8. eclipse中导入dtd文件实现xml的自动提示功能

    以mybatis为例 1.mybatis的xml文件头: (1)config文件: <?xml version="1.0" encoding="UTF-8" ...

  9. BZOJ1222 [HNOI2001]产品加工 - 动态规划- 背包

    题解 怎么看都不像是个背包,直到我看了题解→_→, 第一次碰到这么奇怪的背包= = 定一个滚动数组$F_i$, $i$表示机器$a$用了$i$的时间, $F_i$表示机器$b$用了$F_i$的时间, ...

  10. 简单解决 Javascrip 浮点数计算的 Bug(.toFixed(int 小数位数))

    众所周知,Javascript 在进行浮点数运算时,结果会非预期地出现一大长串小数. 解决: 如果变量 result 是计算结果,则在返回时这样写,return result.toFixed(2): ...