迷途小山羌的程式手札

開發網頁透過 AJAX呼叫不同Domain網址的API時會遇到JavaScript 同源政策的問題

同源政策控制的互動通常分為三類：

• 跨來源寫入(writes)通常是允許的，Ex:超連結、轉址轉向、表單送出至其他網域
• 跨來源嵌入(embedding)通常是允許的，Ex:載入 JavaScript、CSS、其他網頁、影音檔案、入圖片檔...等等
• 跨來源讀取(reads)通常是不允許的，Ex:透過 AJAX 直接讀入不同來源的資料呼叫、不同網域的 APIs

打開"開發者工具" 則會出現:XMLHttpRequest cannot load http://localhost:16128/api/Test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:16141' is therefore not allowed access.的錯誤訊息

這時建議使用 Microsoft.AspNet.WebApi.Cors

1.加入NuGet套件

2.WebApiConfig.cs內加入  "config.EnableCors();"

namespace CrosAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.EnableCors(); //加入這行

            // Web API 設定和服務
            // 將 Web API 設定成僅使用 bearer 權杖驗證。
            config.SuppressDefaultHostAuthentication();
            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

3.在Controller內加入   

    [EnableCors(origins: "*", headers: "*", methods: "*")]
or
    [EnableCors(origins: "http://localhost:16141", headers: "*", methods: "*")]

origins->允許的網域 (切記最後不可以"/"結尾)

methods->允許的動作

*->全部

這時候重建後就可以到網頁上測試

 

但如果遇到客戶有特殊的需求

需要透過 Web.config 的 appSettings 設定要求

我們可以這樣修改

<add key="domainname" value="http://localhost:16141" />

我們可以將WebApiConfig.cs修改成這樣

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web.Http;
using Microsoft.Owin.Security.OAuth;
using Newtonsoft.Json.Serialization;
using System.Configuration;
using System.Web.Http.Cors;

namespace CrosAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            var domainname = ConfigurationManager.AppSettings["domainname"] + ",http://localhost:16128";
            var corsAttr = new EnableCorsAttribute(domainname, "*", "*");
            config.EnableCors(corsAttr);

            // Web API 設定和服務
            // 將 Web API 設定成僅使用 bearer 權杖驗證。
            config.SuppressDefaultHostAuthentication();
            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

本次Demo下載

 

以上內容，若有錯誤

煩請各路高手路過指正

謝謝!

<(_ _)>