1. 程式人生 > >本地,怎麼把自己做的html頁面放到某個域下呢?

本地,怎麼把自己做的html頁面放到某個域下呢?

【目標】:把自己製作的網頁放到了api.bing.com下面

【解決】:如果你瞭解web server這個技術,你就可以使用Nginx或fiddler快速搭建這麼一個環境,這裡我們使用fiddler。

fiddler就相當於1個代理,可以對使用者的請求和伺服器的響應進行修改。我們知道如果我們請求一個伺服器上不存在的檔案一般是跳轉到一個404頁面,但是利用該工具就可以實現修改伺服器響應的結果,呈現給使用者一個自定義的檔案——我們只需要攔截伺服器的響應並替換成我們自己的頁面即可。

    由於Fiddler是基於代理的工作原理,所以開啟Fiddler後IE的代理就被修改成了127.0.0.1:8888,可以直接使用,其他瀏覽器Chrome或者是Firefox可能需要更改網路代理,以Firefox為例。找到設定-->高階-->網路-->代理配置即可,如下圖:

http://img.mukewang.com/5595d9b10001d3b609560618.jpg

    接下來我們請求一個地址http://api.bing.com/bing_search.html,由於bing_search.html在伺服器壓根不存在所以會報出404錯誤,在Fiddler中我們捕獲到了這個響應:

http://img.mukewang.com/5595db6100010da107080123.jpg

    接下來我們將此response替換成我們的本地頁面,就實現了將我們自己的檔案放在某個域:

http://img.mukewang.com/5595dc9c0001c34313660687.jpg

    重新整理瀏覽器,就可以發現我們請求的頁面不再是404錯誤了。

http://img.mukewang.com/5595dd000001805205950366.jpg

    由於我是將樣式和js單獨寫在另一個檔案中,所以還是有404錯誤,接下來按照同樣的方法替換成我們本地的資源:

http://img.mukewang.com/5595de5200011d0206550258.jpg

    再次重新整理頁面,發現網頁載入成功:

http://img.mukewang.com/5595de910001282608360431.jpg

    控制檯沒有任何報錯資訊,至此完成了將某個頁面放在特定的域解決了js的跨域請求。


fiddler就相當於1個代理,可以對使用者的請求和伺服器的響應進行修改。我們知道如果我們請求一個伺服器上不存在的檔案一般是跳轉到一個404頁面,但是利用該工具就可以實現修改伺服器響應的結果,呈現給使用者一個自定義的檔案——我們只需要攔截伺服器的響應並替換成我們自己的頁面即可。

    由於Fiddler是基於代理的工作原理,所以開啟Fiddler後IE的代理就被修改成了127.0.0.1:8888,可以直接使用,其他瀏覽器Chrome或者是Firefox可能需要更改網路代理,以Firefox為例。找到設定-->高階-->網路-->代理配置即可,如下圖:

http://img.mukewang.com/5595d9b10001d3b609560618.jpg

    接下來我們請求一個地址http://api.bing.com/bing_search.html,由於bing_search.html在伺服器壓根不存在所以會報出404錯誤,在Fiddler中我們捕獲到了這個響應:

http://img.mukewang.com/5595db6100010da107080123.jpg

    接下來我們將此response替換成我們的本地頁面,就實現了將我們自己的檔案放在某個域:

http://img.mukewang.com/5595dc9c0001c34313660687.jpg

    重新整理瀏覽器,就可以發現我們請求的頁面不再是404錯誤了。

http://img.mukewang.com/5595dd000001805205950366.jpg

    由於我是將樣式和js單獨寫在另一個檔案中,所以還是有404錯誤,接下來按照同樣的方法替換成我們本地的資源:

http://img.mukewang.com/5595de5200011d0206550258.jpg

    再次重新整理頁面,發現網頁載入成功:

http://img.mukewang.com/5595de910001282608360431.jpg

    控制檯沒有任何報錯資訊,至此完成了將某個頁面放在特定的域解決了js的跨域請求。