什么是跨域?
瀏覽器想服務器發送請求,因為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的請求方式等等,這么多的跨域方案各有各的好處,沒有最好,只有最適合,根據場景選擇適合自己的方式;
