如何在ASP.NET中用jQuery AJAX调用外部URL?跨域调用WebService可行吗?
嘿,我来帮你理清楚这两个问题,顺便给你的代码提些改进建议!
在ASP.NET中用jQuery AJAX调用外部URL的方法
其实核心就是把jQuery AJAX的参数配置到位,尤其是针对跨场景的特殊设置:
- 先确认外部接口的支持类型:如果是公开API(比如你代码里的谷歌相关接口),很多会支持JSONP,这时候就像你那样设置
dataType: "jsonp";如果是你自己或者合作方的接口,建议优先用CORS方案,直接设置dataType: "json"就行,前提是目标服务器配置了允许你域名访问的CORS响应头。 - 按需配置请求细节:比如请求方法
type(GET/POST)、目标url、授权头(如果接口需要验证),还有成功/失败的回调逻辑。
jQuery AJAX能否跨域调用WebService?
当然可以,但得满足跨域访问的前提条件,主要有两种可行方案:
- JSONP方式:只支持GET请求,要求目标WebService能返回JSONP格式的响应(简单说就是把JSON数据包裹在指定的回调函数里)。很多公开第三方API会默认支持这种方式。
- CORS方式:支持GET/POST等所有请求方法,需要目标服务器配置CORS响应头(比如
Access-Control-Allow-Origin设为你的域名或者*)。如果是你自己开发的ASP.NET WebService,还得在后端做对应的CORS配置。
针对你提供的代码的改进建议
先把你贴的代码完整展示出来:
$.ajax({ type: "GET", contentType: "application/json; charset=utf-8", dataType: "jsonp", url: "https://developers.google.com/public/oauth2/1/files", headers: { 'Authorization': headerDATA, 'Content-Type': 'application/json' }, success: function (data) { alert("Success"); for (var i = 0; i < data.items.length; i++) { alert(AJAX); } }, error: function (e) { alert("Failure"); alert(...) } });
这里有几个需要调整的点:
contentType的冗余:JSONP请求本质是通过<script>标签加载资源,不需要手动设置Content-Type请求头,浏览器会自动处理,建议去掉这个配置项。- 未定义的变量
AJAX:success回调里的alert(AJAX)会报错,你应该改成data.items[i]里的具体属性,比如data.items[i].name(根据接口返回的字段来)。 - 不完整的错误回调:
error函数里的alert(...)没写完,建议改成打印具体错误信息,方便排查问题,比如alert("错误详情:" + JSON.stringify(e))。 - 确认接口URL正确性:你写的谷歌这个URL看起来不是有效的接口地址,建议去对应API的官方文档里找正确的请求地址。
修正后的示例代码参考:
var headerDATA = "Bearer 你的实际授权令牌"; // 替换成真实的授权值 $.ajax({ type: "GET", dataType: "jsonp", url: "https://正确的外部接口地址", headers: { 'Authorization': headerDATA }, success: function (data) { alert("请求成功!"); if (data.items && data.items.length > 0) { for (var i = 0; i < data.items.length; i++) { // 替换成接口返回的实际字段 alert("第" + (i+1) + "项:" + data.items[i].name); } } else { alert("没有找到数据哦"); } }, error: function (xhr, status, error) { alert("请求失败:" + status + " - " + error); console.log(xhr.responseText); // 控制台查看更详细的错误信息 } });
如果你调用的是自己开发的ASP.NET WebService,想要用CORS跨域,可以这么配置:
- 在NuGet包管理器安装
Microsoft.AspNet.WebApi.Cors。 - 在
WebApiConfig.cs里添加CORS启用代码:
using System.Web.Http; using System.Web.Http.Cors; public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 生产环境建议替换成你的具体域名,不要用* var corsSettings = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(corsSettings); // 其他WebAPI路由等配置... } }
这样前端就可以用dataType: "json"直接跨域调用这个WebService了,不用再依赖JSONP。
内容的提问来源于stack exchange,提问作者Mahendra
相关产品推荐
相关产品推荐

