CORS跨域 Ajax headers 问题
今天我们遇到了一个CORS跨域的问题
Ajax如下
var url = "http://localhost:11980/api/Demo/GetString"; //api地址
$.ajax({
type: "get",
url: url,
data: null,
headers:
{
SecretKey: "ec8b570ad4bd403783c52ecb5cdfa849",
AppKey: "1259402909",
UniqueKey: "987654321"
},
success: function (data) {
alert(data);
}
});
如果把 headers 去掉,CORS跨域是没有问题的,但是加上就完犊子了
解决方案
Global 文件中添加一下代码
protected void Application_BeginRequest(object sender, EventArgs e)
{
var res = HttpContext.Current.Response;
var req = HttpContext.Current.Request;
//自定义header时进行处理
if (req.HttpMethod == "OPTIONS")
{
res.AppendHeader("Access-Control-Allow-Headers", "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name,Token,Cookie,SecretKey,UniqueKey,AppKey");
res.AppendHeader("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");
res.AppendHeader("Access-Control-Allow-Origin", "*");
res.StatusCode = ;
res.End();
}
}
Filters
public class ActionAuthFilters : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Headers", "*");
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Methods", "*");
base.OnActionExecuted(actionExecutedContext);
}
}
Action
[ActionAuthFilters]
[HttpGet]
public string GetString()
{
return "OK";
}
解决问题
解释为啥
因为 ajax 中添加了 headers
所以浏览器会发送两次请求
第一次是OPTIONS 类型的请求,这个请求会询问服务器支持哪些请求方法(GET,POST等),支持哪些请求头等等服务器的支持情况。等到这个请求返回后,如果原来我们准备发送的请求符合服务器的规则,那么才会继续发送第二个请求,否则会在Console中报错。
第二次才是我们写的那个 Get Post 请求
所以需要在 Application_BeginRequest 中判断如果是OPTIONS 类型的请求 直接返回OK,并且告诉浏览器我们支持什么类型的请求,参数,URL
然后浏览器根据 Application_BeginRequest 中的配置在进行后续的操作
CORS跨域 Ajax headers 问题的更多相关文章
- CORS 跨域 实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
- CORS跨域实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- 解决ajax请求cors跨域问题
”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...
- 跨域资源共享(CORS)--跨域ajax
几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...
- 4 伪ajax:jsonp、cors 跨域请求
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- 跨域Ajax -- jsonp和cors
跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- jquery ajax CORS 跨域訪问 WebService
JS代码: var word = document.getElementById("word").value; $.ajax({ type: "POST", c ...
随机推荐
- lodash源码分析之去重--uniq方法
lodash.js包是node开发中常用的js工具包,里面有许多实用的方法,今天分析常用的一个去重方法---uniq 用法 _.uniq([2, 1, 2]) // => [2, 1] 源码包 ...
- Socket与WebScoket
socket 英文socket的意思是插座,网络中的Socket是一个抽象的接口,可以理解为网络中连接的两端.通常被叫做套接字接口,其意义在对传输层进行封装屏蔽了传输层的复杂性.它并不是一个协议,是为 ...
- Reason的介绍和搭建Reason开发环境
Reason介绍 Reason是在Ocaml语言的基础上修改而来,专门提供给前端开发者使用. Reason是函数式编程语言,使用Bucklescript编译器编译成javascript语言. 在我看来 ...
- 高橋君とカード / Tak and Cards AtCoder - 2037 (DP)
Problem Statement Tak has N cards. On the i-th (1≤i≤N) card is written an integer xi. He is selectin ...
- Python并发式编程
目录 进程 线程 GIL(Global Interpreter Lock) 线程的调用方式 直接调用 继承调用 join&Daemon方法 Daemon(True) 同步锁 死锁 递归锁 同步 ...
- nginx的概念与几种负载均衡算法
Nginx的背景 Nginx和Apache一样都是一种WEB服务器.基于REST架构风格,以URI(Uniform Resources Identifier,统一资源描述符)或URL(Uniform ...
- 数据结构排序算法插入排序Java实现
public class InsertDemo { public static void main(String args[]) { int[] sort ={4,2,1,3,6,5,9,8,10,7 ...
- Virtual DOM 系列一:认识虚拟DOM
1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...
- Nginx 常见问题
1. CreateFile() "C:\Users\zhang\Desktop\K\My Project\SSL-数字证书\Nginx配置\nginx-1.12.2/conf/nginx.c ...
- servlet(6) 链接数据库
一.servlet链接mysql步骤: 1.注册驱动器:Class.forName("com.mysql.jdbc.Driver"); 加载类并执行下面的静态语句块,将Driver ...