Jquery .ajax() jsonp 跨域访问asp.net mvc和修改asp.net mvc 的配置文件允许跨域

最新推荐文章于 2023-03-21 10:03:05 发布

隶属感

最新推荐文章于 2023-03-21 10:03:05 发布

阅读量557

点赞数 1

分类专栏： ASP.NET MVC C# js+html+css jQuery

本文链接：https://blog.csdn.net/qq_36445227/article/details/80670196

版权

C# 同时被 3 个专栏收录

60 篇文章 1 订阅

订阅专栏

ASP.NET MVC

20 篇文章 0 订阅

订阅专栏

js+html+css

17 篇文章 0 订阅

订阅专栏

同源策略不了解的可以先了解一下先

第一种:修改asp.net mvc 配置文件 Web.fonfig

在 Web.config 中的节点添加如下代码:

 <!--允许跨域访问-->
    <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
            </customHeaders>
        </httpProtocol>
    <!--允许跨域访问-->

页面效果:

第二种：JSONP

第一步 : 随便创建一个html页面 ,引入jquery

代码如下 : 要注意 dataType 不要写成 datatype 这里大小写敏感,

jsonpCallback 也大小写敏感不要写错, 内容随便写就行例如这里的doSuccess ,不要太作死就行

 
     <!DOCTYPE html> 
    
     <html lang="en"> 
    
     <head> 
    
      <meta charset="UTF-8"> 
    
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    
      <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    
      <title>demo</title> 
    
     </head> 
    
     <body> 
    
      <script src="jquery.js"></script> 
    
      <script> 
    
      $(function (){ 
    
      var content = { 
    
      url : 'http://localhost:59536/Home/About', 
    
      type : 'get', 
    
      dataType :'jsonp', 
    
      jsonpCallback : "doSuccess", 
    
      success : function(e){ 
    
      alert('成功'); 
    
      }, 
    
      error :function(a,b,c){ 
    
      alert(a.status); 
    
      alert(b); 
    
      alert(c); 
    
      alert('失败'); 
    
      } 
    
      } 
    
      $.ajax(content); 
    
      }) 
    
      </script> 
    
     </body> 
    
     </html>

第二步:创建一个asp.net MVC项目

创建成功后:

修改 Home控制器中的About方法

修改完成后的Home控制器:

注意:方法中 Request.QuerryString["callback"] 就是 html页面上的 jsonpCallback 的值

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;

namespace Test.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            //获取回调函数
            var callBack = Request.QueryString["callback"];   //这里得到的 就是 前端的 jsoonpCallback的 值
            //创建假数据
            var data = new
            {
                success = true,
                msg = "成功"
            };
            //将对象序列化为json字符串
            var  jsonStr = JsonConvert.SerializeObject(data);
            //拼接为jsonp格式     即    回调函数名(json数据格式)
            var res = callBack + "(" + jsonStr + ")";
            //返回jsonp
            return Content(res);
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

右键Test项目 -- 点击属性 --点击web 可以看见给的端口号前端页面的url 就写 http://localhost:59536/Home/About