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 上
其實就是這麼簡單！
背後的原理，就代理轉發！我就不細講了！有興趣的童鞋可以百度！
本文完 
禁止擅自轉載,如需轉載請在公眾號中留言聯絡我們!
感謝童鞋們支援!
如果你有什麼問題,可以在下方留言給我們!