Access-Control-Allow-Origin 不允許來源 null

Question

我制作了一個小的 xslt 文件來創建一個名為 weather.xsl 的 html output，代碼如下：

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

我想將 html output 加載到 html 文件中的一個 div 中，我正在嘗試使用 jQuery 執行以下操作：

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

但是我收到以下錯誤：Access-Control-Allow-Origin 不允許 Origin null。

我讀過有關將 header 添加到 xslt 的信息，但我不確定該怎么做，因此我們將不勝感激，如果無法以這種方式加載 html 輸出，請就其他方法提出建議這樣做會很棒。

Answer 1

Origin null<\/code>是本地文件系統，因此這表明您正在加載通過file:\/\/\/<\/code> URL 執行load<\/code>調用的 HTML 頁面（例如，只需在本地文件瀏覽器或類似文件中雙擊它）。

大多數瀏覽器將同源策略<\/a>應用於本地文件，甚至禁止從與文檔相同的目錄加載文件。 （過去是 Firefox 允許相同的目錄和子目錄，但不再<\/a>允許 .

基本上，將 ajax 與本地資源一起使用是行不通的。

如果您只是在本地測試一些您將真正部署到 Web 的東西，而不是使用本地文件，請安裝一個簡單的 Web 服務器並通過http:\/\/<\/code> URL 進行測試。 這為您提供了更准確的安全圖片。 您的 IDE 很可能內置了某種服務器（直接或通過擴展），讓您只需在 IDE 中點擊“運行”並啟動服務器並提供文件。

Answer 2

Chrome 和 Safari 對使用本地資源的 ajax 有限制。 這就是為什么它會拋出一個錯誤

Access-Control-Allow-Origin 不允許 Origin null。

解決方案：使用 Firefox 或將您的數據上傳到臨時服務器。 如果您仍想使用 Chrome，請使用以下選項啟動它；

--allow-file-access-from-files

有關如何將上述參數添加到 Chrome 的更多信息：右鍵單擊任務欄上的 Chrome 圖標，右鍵單擊彈出窗口中的 Google Chrome，然后單擊屬性並將上述參數添加到快捷方式選項卡下的目標文本框中。 它會如下所示；

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

希望這會有所幫助！

Answer 3

只是想補充一點，“運行網絡服務器”的答案似乎相當令人生畏，但如果你的系統上有 python（至少默認安裝在 MacOS 和任何 Linux 發行版上），它就像這樣簡單：

python -m http.server  # with python3

或者

python -m SimpleHTTPServer  # with python2

因此，如果您將 html 文件myfile.html放在一個文件夾中，例如mydir ，您所要做的就是：

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

然后將瀏覽器指向：

http://localhost:8000/myfile.html

你完成了！ 適用於所有瀏覽器，無需禁用網絡安全，允許本地文件，甚至使用命令行選項重新啟動瀏覽器。

Answer 4

我想根據這個SO來源謙虛地補充一點： https<\/a> :\/\/stackoverflow.com\/a\/14671362\/1743693，現在只需使用以下jQuery指令就可以部分<\/strong>解決這種問題：

<script> 
    $.support.cors = true;
</script>

Answer 5

添加一點以使用 Gokhan 的解決方案：

--allow-file-access-from-files

Answer 6

我正在尋找一種從本地 html 文件向服務器發出 XHR 請求的解決方案，並找到了使用 Chrome 和 PHP 的解決方案。 （沒有jQuery）

Javascript：

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Answer 7

您可以使用 source 標記加載本地 Javascript 文件（在file:/源頁面下方的樹中）：

<script src="my_data.js"></script>

如果您將輸入編碼為 Javascript，例如在這種情況下：

mydata.js ：

$xsl_text = "<xsl:stylesheet version="1.0" + ....

（這對 json 來說更容易）然后你可以在 Javascript 全局變量中使用你的“數據”來隨意使用。

Answer 8

使用 Java Spring 運行 web 服務，您需要在自動生成的 YouAppApplication.java 文件（帶有 main() function 的文件）中的@ServletComponentScan上方添加@SpringBootApplication並創建 1818195 實現后的 8:1818195

@WebFilter("/*")
public class AddResponseHeaderFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // ...
    }

    @Override
    public void doFilter(ServletRequest servletRequest,
                         ServletResponse servletResponse,
                         FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
        httpServletResponse.addHeader("Access-Control-Allow-Origin", "null");

        httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
         filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {
        // ...
    }
}

請注意，您可以為這個 class 選擇不同的名稱，只要它實現 Filter 並具有@WebFilter注釋，您還可以提供與/*不同的通配符，因此此過濾器不適用於每個端點。
正如@Louis Loudog Trottier 所指定的，您需要添加...withCredentials = true; 在創建您的 Ajax 請求時。