后端跨域權限無法打開,於是去網上找了下我這邊能不能解決
現在的瀏覽器出於安全策略的限制,都是不允許跨域的,但是開發的時候經常需要一些別的域的接口,特別是一些接口不是自己能控制的時候,往往會造成開發困難。
解決跨域問題的方式有很多,例如: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>
執行結果如下,可見配置成功了: