关于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: "123456", 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:"123456",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

二、config方式实现CORS

在Web.config的system.webServer配置节下增长配置，这种方式的好处是简单，只要在这里加了这个配置，那么全部的api均可以按同一种规则支持跨域请求

 

    <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> 

 

若是是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进入假死状态。这个提示到目前为止我都不明白什么意思，还原文件的名字是一直在动态变化，就是速度缓慢。

大概就是这个什么还原破坏了程序的哪一个部分吧。。。。头痛，不想研究了。。。