關於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進入假死狀態。這個提示到目前爲止我都不明白什麼意思，還原文件的名字是一直在動態變化，就是速度緩慢。

大概就是這個什麼還原破壞了程序的哪一個部分吧。。。。頭痛，不想研究了。。。