webapi 接收跨域post参数_webapi 跨域 post - CSDN
精华内容
参与话题
  • .NET WebAPI post参数传递

    万次阅读 2018-08-30 09:52:38
    dynamic动态类型(非跨域) 实体类 JObject参数(推荐) 1.键值对对应 这里所说的键值对并非是一般的键值对,是指键为空,值不为空的键值对 前台请求 $.ajax({ url: host + '/api/Source/TestParams', type...

    可行的传参形式

    1. 键值对对应
    2. dynamic动态类型(非跨域)
    3. 实体类
    4. JObject参数(推荐)

    1.键值对对应

    这里所说的键值对并非是一般的键值对,是指键为空,值不为空的键值对
    前台请求

    $.ajax({
        url: host + '/api/Source/TestParams',
        type:"post",
        data: { '': "Amon"},
        success: function(a) {
            console.log(a);
        }
    });

    后台
    这里写图片描述

    可以看到后台是接收到参数了的,但是这种方式只能传一个键值对参数,{'': 'Amon', '': 'male'} 这种参数是接收不到的,当然也可以把所有参数序列化为字符串,后台再进行反序列化,但是这种方式较为繁琐,所以不推荐

    2.dynamic 动态类型(非跨域)

    这种传参方式在非跨域环境下可行,但是在跨域环境下,前台请求时会出现 405 错误,虽然通过调整ajax请求参数会解决这个错误,但是后台无法正常接收参数
    前台请求

    $.ajax({
        url: host + '/api/Source/TestParams',
        type:"post",
        contentType: 'application/json',
        data: JSON.stringify({ 'name': "Amon", sex: 'male'}),
        success: function(a) {
            console.log(a);
        }
    });

    后台
    这里写图片描述

    当前传参方式在非跨域环境中测试为可以正常传参,跨域环境暂未找到解决方法,如果有解决方法,欢迎交流

    3.实体类

    实体类是相对来说比较简单的一种传参方式,跟我们平常采用的传参方式相似
    前台请求

    $.ajax({
        url: host + '/api/Source/TestParams',
        type:"post",
        data: { 'name': "Amon", sex: 'male'},
        success: function(a) {
            console.log(a);
        }
    });

    后台
    这里写图片描述
    这里写图片描述
    这种传参方式需要声明一个实体类,所以说在改变传参时,相应的要去更改实体类,灵活性不是很高

    4.JObject 参数(推荐)

    JObject传参方式是个人比较推荐的一种方式,前台请求传参写法不具迷惑性,后台接收也较为灵活
    前台请求

    $.ajax({
        url: host + '/api/Source/TestParams',
        type:"post",
        data: { 'name': "Amon", sex: 'male'},
        success: function(a) {
            console.log(a);
        }
    });

    后台
    这里写图片描述

    如果有其他的传参方式,欢迎交流

    展开全文
  • 关于WebApi接口参数的详细说明,以及Post,Put,Get,Delete的区别及原码示例, 作者昵称:懒得安分 博主首页 推荐文章: WebApi 接口参数不再困惑:传参详解 WebApi 接口返回值不困惑:返回值类型详解 WebApi ...

    关于WebApi接口参数的详细说明,以及Post,Put,Get,Delete的区别及原码示例,

    作者昵称:懒得安分       博主首页

    推荐文章:

    WebApi 接口参数不再困惑:传参详解

    WebApi 接口返回值不困惑:返回值类型详解

    WebApi 跨域问题解决方案:CORS

     

    展开全文
  • .NET Core WebAPI post参数传递时后端的接收方式 实体类 dynamic动态类型 JObject参数(推荐) 单值参数(字符串参数) A.前端Post请求代码 $.ajax({ url: "/api/student/poststudent", type: 'POST', data:JSON....

    .NET Core WebAPI post参数传递时后端的接收方式

    1. 实体类
    2. dynamic动态类型
    3. JObject参数(推荐)
    4. 单值参数(字符串参数)

    A.前端Post请求代码

    $.ajax({
               url: "/api/student/poststudent",
               type: 'POST',
               data:JSON.stringify({ name: "张三", age: 21 }),
               success:function () {
               },
               dataType: "json",
               contentType: "application/json"
           });

    B.后端接收参数方式

    1. 实体类

    实体类是比较简单的一种传参方式,使用频率非常高。

    1. 添加实体类
        public class Student
        {
            public string Name { get; set; }
            public int Age { get; set; }
        }
    1. 后台处理Post请求代码
    [HttpPost("{id}")]
    public void PostStudent([FromBody] Student student)
    {
    }
    1. 接收参数结果

    2.dynamic动态类型

    1. 后台处理Post请求代码
    [HttpPost("{id}")]
    public void PostStudent(dynamic student)
    {
        var name = student.name;//name大小写与前端参数一致
        var age = student.age;
    }
    1. 接收参数结果

    3.JObject参数(推荐)

      JObject传参方式是个人比较推荐的一种方式,前台请求传参写法不具迷惑性,后台接收也较为灵活

    1. 引入Microsoft.AspNetCore.Mvc.NewtonsoftJson包
    2. 添加引用 using Newtonsoft.Json.Linq;
    3. 后台处理Post请求代码
    4. 3.0以后需要为Controllers添加NewtonsoftJson注册(services.AddControllers() .AddNewtonsoftJson();)
    [HttpPost("{id}")]
    public void PostStudent([FromBody] JObject student)
    {
    }
    1. 接收参数结果

    4.单值参数(字符串参数)

    只能传一个字符串参数,并且用单引号包一个双引号,双引号里为字符串内容!

    1. 前端代码与以上方式不同
    $.ajax({
               url: "/api/student/poststudent",
               type: 'POST',
               data:'"name=张三,age=21"',//这里是重点!用单引号包一个双引号,双引号里为字符串内容!
               success:function () {
               },
               dataType: "json",
               contentType: "application/json"
           });
    1. 后台处理Post请求代码
    [HttpPost("{id}")]
    public void PostStudent([FromBody] string values)
    {
    }

    WebApi 方法参数前加[FromBody]标识,表示该参数值应该从请求的Body中获取,而不是从URL中获取。不加[FromBody]标识后台取不到参数值。

    1. 接收参数结果

    设置允许跨域

    如果有跨域需求支持,请设置允许跨域。在Stateup.cs中添加如下代码。

    1. 修改ConfigureServices方法,添加代码如下:
    //允许一个或多个来源可以跨域
    services.AddCors(options =>
    {
          options.AddPolicy("CustomCorsPolicy", policy =>
          {
                 // 设定允许跨域的来源,有多个可以用','隔开
                 policy.WithOrigins("https://localhost:5000")//只允许https://localhost:5000来源允许跨域
                 .AllowAnyHeader()
                 .AllowAnyMethod()
                 .AllowCredentials();
          });
    });

    //配置跨域处理,允许所有来源
    services.AddCors(options =>
    {
      options.AddPolicy("cors", policy =>
      {
        policy.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
      });
    });
     
    1. 修改Configure方法,添加代码如下:
    app.UseCors("CustomCorsPolicy");
    展开全文
  • 前后端分离:WebAPI+Vue开发——远程数据请求axios 前后端分离:WebAPI+Vue开发——跨域设置 前后端分离:WebAPI+Vue开发——身份认证 本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。...

    前后端分离:WebAPI+Vue开发——远程数据请求axios

    前后端分离:WebAPI+Vue开发——跨域设置

    前后端分离:WebAPI+Vue开发——身份认证

    本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。

    一般情况下,前端和后端在两个项目中,在部署的时候就要部署在两个域名下,如前端域名:http://www.abc.com/,WebAPI域名http://api.abc.com/,这就产生了跨域的问题,跨域的时候会出现这样的错误提示:

    “Failed to load http://api.abc.com/api/user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.abc.com' is therefore not allowed access.”

    大概意思就是http://www.abc.com没有从WebAPI接口http://api.abc.com/获取数据的权限,要明确的一点是,这是js上异步请求的保护机制,不是axios独有的问题,处理方法这篇博客有详细说明:(web api 跨域请求,ajax跨域调用webapi)。

    我采用的方式是修改WebAPI的webconfig配置,在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" />
        </customHeaders>
    </httpProtocol>

    其中value="*",也可以修改为value="http://www.abc.com"(注意域名后面不带"/");前者是取消所有域名对webapi的访问限制,后者是指定单个域名有访问权限。

    这样处理之后完了吗?还没完。。。上的引用的博客中用一句话简单的说了下OPTIONS处理的,但是没说为什么要处理OPTIONS,而且处理方法是需要对每个控制器修改,这个不太方便。

    为什么会有OPTIONS请求?这是主流浏览器跨域请求的机制,在POST请求之前,先发送一个OPTIONS预请求,预请求返回状态码正常的情况下才发送我们真正想要的POST请求,通俗点说,就是POST先找个小弟OPTIONS探探路,小弟说这条路能走,POST才走。这篇文章讲的更详细一点(.net mvc webapi 处理跨域请求)。

    提供两种处理方法:

    一、在global中添加上对OPTIONS方法的处理 

    protected void Application_BeginRequest()
    {
        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
        {
            Response.End();
        }
    }

    二、去掉或注释掉配置文件system.webServer标签中的

    <remove name="OPTIONSVerbHandler"/>这个标签在跨域请求里边真是一个大坑(后来求证发现这其实不是坑,允许OPTIONS请求会增加跨站攻击,服务端风险太大),它应该是表示不接收OPTIONS请求,预请求没结果,后面的请求是不会执行的。

    我验证的结果是,上面两种方法,任选一种都可以解决问题。不过我还发现一种情况,在找到上面的解决方案之前,做post请求测试的时候,如果不传递参数,服务端不对options请求进行上面的处理也能正常返回,因为浏览器的NetWork中显示,浏览器没有发出options预请求。

     

    展开全文
  • 如题,我按网上给的方法,用System.Web.Http.Cors做webapi跨域的设置,但还是无法跨域访问, 代码如下 启动跨域: ``` using System; using System.Collections.Generic; using System.Linq; using System.Net....
  • webapi 自宿主 post 多个参数

    千次阅读 2019-01-03 17:21:59
    项目需要 java发起请求 调用c#客户端的一个程序,而且要直接通过前台ajax请求 ,不能通过java后台访问...webapi通过后台设置跨域支持。还有一个比较头疼的问题就是传参的问题。单一的字符串,对象,或者多个参数 多...
  • web前端跨域的几种方式

    千次阅读 2019-07-15 21:42:13
    一、什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子...
  • 这个简单的问题对于初学core的我来说还是折腾了好久,然后加了一个群问了一下,终于解决了,感谢大神的指点;...我在header里面返回自定义参数count,startup.cs配置如下:  app.UseCors(builder =&gt;  {  ...
  • 一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可。 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 虽然已经处理了跨域...
  • 前言 温馨提示:可以订阅我的微信公众号,在手机里看技术文档也很...一次请求传递参数的方式主要有 URL路径中、请求头中、请求体中还有通过cookie等,下面我们分别对几种方式进行讲解。 MediaType的选择 MediaTyp
  • api接收图片信息,存到硬盘,然后将路径存储在数据库中。 问题:1、首先要解决跨域问题,这个在mvc5的web api的默认配置中修改即可。 2、post提交问题,在这里我遇到了大坑,往上研究了一大圈,各种五谷杂粮的...
  • JSONP实现跨域请求 不支持POST!

    千次阅读 2018-10-15 16:12:08
    JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。 JSONP实现跨域请求的原理简单的说,就是动态创建&lt;script&gt;标签,然后利用&lt;script&gt;的src 不受同源策略约束来跨域获取...
  • 什么是跨域跨域解决方法

    万次阅读 多人点赞 2020-05-13 12:34:57
    一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建...
  • postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信,可以实现跨文本档、多窗口、跨域消息传递。接受两个参数: ① data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型...
  • 不说废话直接上解决方案。 一般都是使用Model类库,因为传参的话都是Model里来的,当然如果有定义比如:出入参的类库,下面我就按Model类库来说,其它类库也按以下步骤来就行了。 第一步:选中Model类型右键——...
  • 1 浏览器的限制 2 跨域 3 浏览器发送的是 XHR (XMLHttpRequest)请求 当以上三个条件都满足时浏览器会抛出跨域请求异常(记住...常见的简单请求:请求方法为:GET ,HEAD,POST,请求header里面无自定义头,Conten...
  • 解决常见接口跨域问题

    万次阅读 2017-07-13 22:11:53
    常用方法解决跨域问题:1.jsonp 2.iframe 3.postMessage 4.服务器代理 5.cors设置
  • 本地web访问远程服务器后端restapi引发的跨域问题
  • 项目前后端分离,前台页面使用ajax请求后端的api。 前端写法: var token=”Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1MTAyNDEwMDAsInVzZXJJZCI6IsK_XHUwMDEywpbCi8KBwqhSwpjDp8KgU8KaXcKlwrDDryJ9.LuUr3I_...
  • AngularJS实现跨域请求

    万次阅读 2015-11-12 01:12:46
    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。 下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post...
1 2 3 4 5 ... 20
收藏数 8,133
精华内容 3,253
关键字:

webapi 接收跨域post参数