关于js调用外部部署的web api
没想到多年之后我还得继续写这些东西.... 瀑布汗~
最近不得不开始研究用web api
MVC的项目中,在js文件里,实现点击一个按钮调用外部发布好的api,再从api把值回传给js页面,跳转。
经测试下面两种方法均有效获得api返回值。
function testinfo(id) {
$.ajax({
url: "http://158.14.51.103/api/Verify/Get",
type: 'GET',
dataType: 'JSON',
data: { Id: id, Key: "", FUrl: "./SalesSetting" },
success: function (data) {
alert("123 " + data.FUrl);
console.log(data.FUrl); //window.location.href = furl+id;
}
});
$.get('http://158.14.51.103/api/Verify/Get',
{ Id: id,Key:"",FUrl:"./SalesSetting"},
function (result) {
console.log(result.Key);
});
}
不过,最开始调用api的时候不停的报下面的错误。
XMLHttpRequest cannot load http://158.14.51.103/api/Verify/Get?Id=30054&Key=123456&Token=&FUrl=.%2FSalesSetting. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5955' is therefore not allowed access. The response had HTTP status code 404.
查了一下网上好多人说是chome浏览器的问题,但是在浏览器属性里加Access-Control-Allow-Origin字符串的方式并不好用,后来查到了下面这个网址,国外也有人在问这个问题。
http://stackoverflow.com/questions/27504256/mvc-web-api-no-access-control-allow-origin-header-is-present-on-the-requested
You need to enable CORS in your Web Api. The easier and preferred way to enable CORS globally is to add the following into web.config
<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>
</system.webServer>
Please note that the Methods are all individually specified, instead of using *
. This is because there is a bug occurring when using *
.
You can also enable CORS by code.
把上面那段代码加入config就解决了~ 感动!
下面的网页也有提到这个问题
http://blog.csdn.net/starfd/article/details/45307659
2、config方式实现CORS
在Web.config的system.webServer配置节下增加配置,这种方式的好处是简单,只要在这里加了这个配置,那么所有的api都可以按同一种规则支持跨域请求
如果是HTTP Basic Access authentication,似乎还需要个<add name="Access-Control-Allow-Credentials" value="true" />,此处还未验证
最后补充个Cors相关说明:http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-02.html
以及官方链接:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
另外,关于web api 在IIS上的部署,我只想大声疾呼——IIS如果是后装的记得要注册记得要注册记得要注册!!!
好了,希望我能在web api的迫害下,顺利的活到下周!!!
=====================================================================================
好景不长。昨天好容易解决好了这个问题,今天居然故态重萌!!!
同样的报错出来了,检查webconfig,昨天加的一段代码还在,但是就是又报错说是跨域问题了。
头疼,搜了半天cors相关的,后来下面的文章救了我的命。
http://www.cnblogs.com/xhhha/p/3837277.html (百度上全是各种不要脸的网站转载,翻了半天才翻出来。。。这个大概应该是原作者吧~)
核心重点是这个部分:
3.Web API支持CORS
3.1打开VS,工具->库程序包管理器->程序包管理器控制台 ,输入下列命令:Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.0.0
注意 :目前Nuget 上面最新的版本是5.2.0 ,但是我测试,下载的时候,会有一些关联的类库不是最新的,System.Net.Http.Formatting 要求是5.2,我在网上找不带这dll,因此建议安装 :Microsoft.AspNet.WebApi.Cors 5.0就OK了。
Nuget 科普link: http://www.cnblogs.com/dubing/p/3630434.html
因为在某次修改了api重新编译的时候,莫名其妙的弹出了这个对话框
然后程序会变得无比的慢,vs进入假死状态。这个提示到目前为止我都不明白什么意思,还原文件的名字是一直在动态变化,就是速度缓慢。
大概就是这个什么还原破坏了程序的哪个部分吧。。。。头痛,不想研究了。。。
关于js调用外部部署的web api的更多相关文章
- 国产中标麒麟Linux部署dotnet core 环境并运行项目 (三) 部署运行WEB API项目
部署dotnet Core Web API 上一步的文章,是我们公司最核心的一个ORM组件,在中标麒麟系统完成了一个插入数据的任务,这一步是将正式的从dot net framework 迁移到 dot ...
- JS调用iframe方式实现Web区域打印页面内容
1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...
- C# 调用网易“易盾” Web API
易盾是网易推出的反垃圾云服务,最近准备试用一下,但发现api文档中只提供了Java, Python, PHP的示例代码,却没有C#的示例代码,于是参照Java示例代码用C#实现了一下. Java中用H ...
- js调用高德地图的搜索api
var city = $('#city')[0].value; AMap.plugin(['AMap.Autocomplete'],function(){ var autoOptions = { ci ...
- 用js的eval函数模拟Web API中的onclick事件
在检查组内小伙伴提交的tabToggler插件的js代码时,发现了onclick的如下用法: el.onclick = function(){ //按钮样式切换 for(var i=0;i<ob ...
- WebApi系列~通过HttpClient来调用Web Api接口~续~实体参数的传递
回到目录 上一讲中介绍了使用HttpClient如何去调用一个标准的Web Api接口,并且我们知道了Post,Put方法只能有一个FromBody参数,再有多个参数时,上讲提到,需要将它封装成一个对 ...
- Web API应用架构在Winform混合框架中的应用(3)--Winfrom界面调用WebAPI的过程分解
最近一直在整合WebAPI.Winform界面.手机短信.微信公众号.企业号等功能,希望把它构建成一个大的应用平台,把我所有的产品线完美连接起来,同时也在探索.攻克更多的技术问题,并抽空写写博客,把相 ...
- 开发程序过程中遇到的调用Web Api小问题
在用Umbraco Web Api开发程序时,前端使用React调用Web Api 当时是有一个页面Search.cshtml,把用React产生的脚本代码,在这个页面进行引用 写了一个Api, 调用 ...
- 通过Web API调用Action时各种类型输入参数传递值的方法
本人微信公众号:微软动态CRM专家罗勇 ,回复280或者20180906可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . Dy ...
随机推荐
- 批量改名工具 Bulk Rename Utility
好用的批量改名工具 Bulk Rename Utility 功能: 这个工具既可以改文件名,也可以改目录. 使用技巧: 结合前缀4位 数字 可以让文件排列很整齐 例如: 0030 关于 ...
- linux c 获取头文件函数getenv
#include <stdio.h>#include <stdlib.h> int main(){ printf("%s\n", getenv(" ...
- LinkedList
- fdisk -c 0 350 1000 300命令
在Linux中有一个fdisk的分区命令,在对开发板的nand或者emmc分区也会用到这个命令, fdisk -c 这里0 350 1000 300分别代表: 每个扇区大小为0,一共350个柱面,起始 ...
- Java生成与解析二维码
1.下载支持二维码的jar包qrcode.jar和qrcode_swetake.jar, 其中qrcode_swetake.jar用于生成二维码,rcode.jar用于解析二维码,jar包下载地址(免 ...
- JavaScript的学习2
1. a.字符串运算符 符号 功能 + 字符串连接 += 将左边的值加上右边的值然后再赋值给左边的变量 b.比较运算符 运算符 含义 说明 > 大于 M>N,当M大于N时,返回TRUE ...
- 第一周:Java基础知识总结(1)
1.软件开发的基本步骤: 1.分析问题,建立数据模型. 2.确定数据结构类型和算法. 3.编写程序. 4.调试程序. 2.Java语言 Java是一种简单的.面向对象的.分布式的.解释的.安全的.可移 ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- 剑指Offer:面试题31——连续子数组的最大和(java实现)
问题描述 : 输入一个整数数组,数组里面有正数也有负数.数组中一个或连续几个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n) 思路1:常规解法,不知道怎么描述了.. 代码: bo ...
- 转:中间人攻击利用框架bettercap测试
0x00前言 上篇提到内网渗透很有趣,这次就从一款新工具说起: bettercap 0x01简介 bettercap可用来实现各种中间人攻击,模块化,便携.易扩展 0x02特点 提到中间人攻击,最知名 ...