設置chrome瀏覽器解決跨域,解決前端跨域問題,在本地進行開發工作


后端跨域權限無法打開,於是去網上找了下我這邊能不能解決

現在的瀏覽器出於安全策略的限制,都是不允許跨域的,但是開發的時候經常需要一些別的域的接口,特別是一些接口不是自己能控制的時候,往往會造成開發困難。

解決跨域問題的方式有很多,例如:Nginx代理、通過http頭來解決等,我找到了一個在前端分離開發階段比較簡單的方式,配置瀏覽器解決跨域問題。記錄如下:

 

今天無意中知道了,chrome瀏覽器可以通過設置,解決跨域問題。

如果 Chrome 版本在49之前,設置方法如下:
1、在Chrome的快捷圖標上點擊鼠標右鍵(如果沒快捷方式,可以找到文件路勁,發送快捷方式到桌面)

2、選擇“屬性”
【除了右鍵選擇屬性的方式查看之外,還可以按住alt雙擊圖標,直接打開屬性面板】

3、選擇快捷方式標簽

4、在“目標”里面,在原chrome路徑的基礎上加上 --disable-web-security 【注意--之前有空格】

5、點擊“應用”

6、點擊“確定”關閉屬性窗口

7、關閉所有已打開的chrome,重新啟動(必須點擊該快捷方式打開)

8、看到地址欄下面的小黃條你使用的是不受支持的命令標記 –disable-web-security,就成功了

如果是49以上的版本
步驟和上面的一樣,只是第4步的參數稍微不一樣。

 --disable-web-security --user-data-dir=C:\chromedata
 【注意--之前有空格】

C:\chromedata 是你本地硬盤的一個目錄,你自己最好新建一個,上面的目錄路徑換成你新建的目錄就可以了。
屬性配置截圖如下:

 

 配置后,運行彈出的警告截圖如下(因為我的是49以上的版本,所以警告內容是--disable-web-security):

 

 

【備注:這樣的方式比較適合前期在前端和后端開發不在同一個web服務器的情況,通過瀏覽器配置的方式讓前端也可以訪問到后端接口,在正式上線時,如果放在同一個web容器中,自然就不會出現類似的問題了。這種方式僅適合在開發的時候使用,不適合做正式的跨域解決方案】

作為測試,我寫了段代碼(本地使用ajax去訪問百度,並將百度的網頁源代碼獲取出來顯示在一個div上),如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ajax跨域demo</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="myDiv">
        </div>
    </body>
    <script>
        $(function(){
            $.get("http://www.baidu.com",function(data){
                $("#myDiv").text(data);
            });
        });
    </script>
</html>

執行結果如下,可見配置成功了:

 

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM