前端跨域的幾種處理方式


什么是跨域?

  瀏覽器想服務器發送請求,因為Ajax只能在同源策略下使用,不能請求不同接口的數據,例如瀏覽器接口8080請求接口3000的數據,是請求不到數據的會報錯,這時就需要跨域來解決跨域就是解決此問題。以下三種方式是我所熟悉的前端跨域請求方式

  從創建文件到訪問的步驟
    后台文件接口為 3000,前端接口為 8080

    一、在 cmd 中 輸入 cnpm i -S webpack webpack-cli,搭建一個前端的工程

     創建結果如下

    二、在當前文件夾下創建 webpack.config.js默認配置文件,進行配置。

       配置完畢后文件創建如下:(server.js為后端請求接口文件)

      創建一個server.js文件,進行簡單后台接口的編寫,在cmd中 使用 node server.js 就可以啟用后台接口

        啟用后台接口 node server.js,在瀏覽器中輸入 http://127.0.0.1:3000/user,顯示:

 

         這時我們的后台接口就基本配置完畢。然后在 index.js 中的進行ajax請求,這時會顯示報錯。

         1、使用 webpack 中代理的方式的來請求后台接口  

            在webpack.config.js配置中寫入紅框中的代碼,

         以 /api 的代理方式來實現跨域請求

         2、后端 cors 處理的方式,在server.js文件中加入以下代碼,這種方式是后端處理,最簡便的方式,不需要前端做任何處理方式就能請求,只需要在后端添加以下代碼就可以,

  

         3、webpack插件處理的方式,也是中間件,在server.js文件中加入以下代碼,重新啟動 node server.js,在瀏覽器中啟動http://127.0.0.1:3000,會發現同時也請求到了數據

  

 

 

  還有jsonp 的請求方式、vue中的axios的請求方式等等,這么多的跨域方案各有各的好處,沒有最好,只有最適合,根據場景選擇適合自己的方式;

 


免責聲明!

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



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