React專案配置4(如何在開發時跨域獲取api請求)
本教程總共6篇,每日更新一篇,請關注我們!你可以進入歷史訊息檢視以往文章,也敬請期待我們的新文章!
1、React專案配置1(如何管理專案公共js方法)---2018.01.11
2、React專案配置2(自己封裝Ajax)---2018.01.12
3、React專案配置3(如何管理專案API介面)---2018.01.15
4、React專案配置4(如何在開發時跨域獲取api請求)---2018.01.16
5、React專案配置5(引入MockJs,實現假介面開發)---2018.01.17
6、React專案配置6(前後端分離如何控制使用者許可權)---2018.01.18
7、React專案配置6(ES7的Async/Await的使用
開發環境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
我們在開發時候,如果前後端不在同域下,即前後端分離,就會產生跨域的情況!
將來在釋出的時候,在生產環境下,大概會有兩種情況:
-
前後端不在同域下(JSONP,CORS,今天不講)
-
前後端在同域下
我們今天要講的是第二種情況,前後端在同域下,而開發時,不在同域下!
1、設定chrome
在我們早期要想在開發的時候,實現跨越請求,比較簡單的辦法就是設定chrome,讓他禁用掉瀏覽器跨越現限制:
就是在啟動chrome之前,在他的屬性的目標處設定
google-chrome-stable --disable-web-security --user-data-dir
這種方法 好像對chrome 版本也有要求:chrome49
更多知識點,有興趣的童鞋可以百度!
2、webpack-dev-server
其實我們在第一節課的時候就已經安裝了這個依賴,並且也設定了,只是沒有細講,今天我們來講講!
開啟 config -> webpack -> webpack.dev.conf.js
看下這段程式碼
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://192.168.12.11/',
secure: false
}
],
context:請求的路徑
就是當你訪問 http://localhost:8080/api/newList 的時候就會被命中
target:api host
命中之後,就會被轉發到 http://192.168.12.11/api/newList 上
其實就是這麼簡單!
背後的原理,就代理轉發!我就不細講了!有興趣的童鞋可以百度!
本文完
禁止擅自轉載,如需轉載請在公眾號中留言聯絡我們!
感謝童鞋們支援!
如果你有什麼問題,可以在下方留言給我們!