Ajax 访问接口跨域问题

Ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,所谓同域是指，域名，协议，端口均相同,从一个网站访问其他网站的资源受到限制

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

1. JsonP方式解决跨域问题：（Jsonp 通常只是简单的get请求）

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现。具体原理如

C# mvc web api 后台：

public class JsonpResult<T> : ActionResult
{
    public T Obj { get; set; }
    public string CallbackName { get; set; }
 
    public JsonpResult(T obj, string callback)
    {
        this.Obj = obj;
        this.CallbackName = callback;
    }
 
    public override void ExecuteResult(ControllerContext context)
    {
        var js = new System.Web.Script.Serialization.JavaScriptSerializer();
        var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")";
        context.HttpContext.Response.ContentType = "application/json";
        context.HttpContext.Response.Write(jsonp);
    }
}

　Controller 中的方法：

public ActionResult AjaxJsonp(string s, string f, string callback)
    {
        string result = s + '-' + f;
        return new JsonpResult<object>(new { result = result }, callback);
    }　

前端Jquery 脚本：

$.ajax({
    type: "GET",
    async: false,
    url: "http://localhost:63376/CommonActive/AjaxJsonp",
    dataType: "jsonp",
    jsonp: "callback",
    data: { s: '11', f: '22' },
    jsonpCallback: "handler",
    success: function (result) {
        alert('success');
    },
    error: function (e) {
        var test = e;
    }
});

2. CORS方案:

c# MVC 在webconfig中配置

"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"
 
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, Content-Type, Accept, X-Token" />
</customHeaders>
</httpProtocol>
 
</system.webServer>