如何設置Origin Request Header

Question

我想向遠程API發送AJAX請求。

function Gettest(CourseID) {
    var param = { "CourseID": CourseID};
    param = JSON.stringify(param);
    $.ajax({
        type: "Post",
        url: apiurl + "Course/DelCoursetargetedaudience",
        contentType: "application/json; charset=utf-8",
        data: param,
        dataType: "json",
        success: function (data) {
        },
        error: function (response) {
        }
    });
};

但是我需要在發送請求之前更改源名稱。

請參考下圖。

Answer 1

簡而言之：你做不到。

如MDN所述 ; Origin是一個'禁止'標題，意味着你無法以編程方式更改它。

您需要配置Web服務器以允許CORS請求。

要啟用CORS，請將其添加到Web.config中

<system.webServer>   
    <!-- Other stuff is usually located here as well... -->
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />               
        </customHeaders>
    </httpProtocol>
<system.webServer>

或者，在Global.asax.cs中

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        /* Some register config stuff is already located here */
    }

    // Add this method:
    protected void Application_BeginRequest()
    {
        HttpContext.Current.Response.AddHeader
            (name: "Access-Control-Allow-Origin", value: "*");            
    }
}

Answer 2

正如Baksteen所說，您無法在JavaScript中更改此標頭值。 您必須編輯服務器配置以允許跨源請求。

但是：在閱讀完您的意見后，我認為您只需要一個調試和測試解決方案。

在這種情況下，您可以使用Chrome並使用特殊的不安全參數啟動它。 如果您向Chrome提供此參數，則會允許您跨域請求。

除了測試您的頁面之外，不要將此chrome實例用於其他內容！

chrome --disable-web-security --user-data-dir

我為Firefox和Chrome嘗試了幾個附加組件，但它們不適用於最新版本的瀏覽器。 所以我建議切換到chrome並使用上面的參數來測試你的API調用。

---

如果您對更強大的解決方案感興趣，可能需要使用調試代理，例如來自Telerik的Fiddler 。 您可以編寫自定義規則，因此Fiddler會在請求離開您的PC之前更改您的標頭。 但是在你可以使用它的所有功能之前，你必須深入研究這個工具。 這可能很有趣，因為它可能會幫助您解決這個調試問題。