关于AJAX跨域调用web api问题汇总(一)

4 篇文章 0 订阅
1 篇文章 0 订阅

这几天在研究phonegap、phonegap利用了打包的方式将html页面打包在了apk之中,那么诸如登录、取新闻等数据从何而来来?既然我们开发的web应用,肯定ajax是我们的主角,于是问题就产生了,本地文件 请求  www.mywebapi.com 去调用数据,这时候是百分之百会存在跨域的,就这些跨域问题,本人研究了几天,网上的也是天花乱坠,但是很多经过我自己的实验,我没有办法达到我们想要的效果的,带着这些问题。我们一一来探讨,当然肯定会有不正确的地方,望大家指正。


1、关于跨域ajax请求。

         跨域ajax请求网上说的非常多,也基本都正确,这里我就简单的贴出用法。

        当A请求B时,如果不在同一个域下(域名、端口相同),那么当我们以ajax去请求时会发生一下错误。

         

            $("#btnGet").click(function () {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8066/Login/Token",
                    
                    success: function (result) {
                        alert(result.result);
                    }
                });
            });
</pre><p><img src="https://img-blog.csdn.net/20150915085028570?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p></p><p>    产生此问题的原因,同源安全策略。网上很多不细说。解决方案:</p><p>   1、Jsonp  jsonp只能以get方式,存在这大数据的限制。并且服务器端与客户端需要同时处理。</p><p>    2、w3c在的标准处理方式,在html输出头上添加  Headers.add("Access-Control-Allow-Origin","*").</p><p></p><p>   jsonp不细说了,网上百度一大堆。说说第二种方式(因为是新的标准有浏览器版本的支持,部分老的浏览器不支持),不过如果你是在webapp里使用,就目前的现状应该可以放心大胆的用。</p><p>    假设你是asp.net 程序的话。可以在web.config   system.webServer下加上如下代码直接解决:</p><p>    <pre name="code" class="html">    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,Authorization,Accept,X-Requested-With" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

OK,再试试我们的代码。顺便附上web api后台测试代码

web api:

   [Authentication]
    public class LoginController : ApiController
    {
        [AllowAnonymous]
        [HttpGet]
        public HttpResponseMessage Token()
        {
            string token;
            int type = 0;
            string partner = "admin";
            string partnerKey = SecuritySignHelper.PartnerKey;
            NameValueCollection getCollection = new NameValueCollection();
            token = getCollection.GetSecuritySign(partner, partnerKey);//不带任何参数的请求  
            type = 1;
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string str = serializer.Serialize(new { type = type, result = token });
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };
            return result; 
        }
    }


  

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 要解决Web API跨域问题,可以通过在Web.Config中的system.webServer节点下增加跨域配置来实现。具体的配置如下所示: ``` <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="AuthToken, Authorization, Origin, Content-Type, Accept, X-Requested-With" /> <add name="Access-Control-Allow-Methods" value="GET,HEAD,POST,OPTIONS" /> </customHeaders> </httpProtocol> </system.webServer> ``` 另外,还可以在代码中使用EnableCorsAttribute来启用跨域请求。例如,在EnableCrossSiteRequest方法中添加以下代码: ``` private static void EnableCrossSiteRequest(HttpConfiguration config) { var cors = new EnableCorsAttribute( origins: "*", headers: "*", methods: "*" ); config.EnableCors(cors); } ``` 这样就可以解决Web API跨域问题了。\[1\]\[2\] #### 引用[.reference_title] - *1* [ASP.NET WebAPI解决跨域问题](https://blog.csdn.net/hbzhlt/article/details/122221683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [关于 Asp.Net Web Api 跨域问题解决方案](https://blog.csdn.net/squallonline8708/article/details/122728285)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值