解決react項目中跨域和axios封裝使用

標籤：分享   .com   create   col   並且   com   遇到   最新   start   

最新幾天學了一下react，發現了幾個問題，估計新入坑的同學們也會遇到，下面我先列出來幾點

1、請求跨域問題

2、如何發起請求

3、axios的簡單封裝

 

全域安裝create-react-app腳手架，協助我們建立react項目

npm install -g create-react-app

然後建立react項目

create-react-app xxx項目名

然後安裝依賴，並且運行react項目

安裝 npm install

運行 npm start

 

首先我們解決跨域的問題

開啟項目產生的package.json檔案，修改檔案內容如下

如果你賴一點可以這樣寫

完整寫法

這樣就可以解決跨域問題。

接下來開始講一下如果在react中使用axios

首先安裝axios

npm install axios --save-dev

然後在我們的src目錄下建立一個server.js的檔案寫下如下代碼

然後我們就可以在react組件上使用我們的axios

隨便寫一個react組件，然後引進我們的剛剛封裝的server.js，先寫一個登入的函數，然後在組件渲染完之後執行該函數

開啟瀏覽器查看返回結果

看到上面的結果，說明我們已經成功決解跨域問題並且拿到了後台返回的資料。是不是很簡單，趕緊自己動手試一試吧。

解決react項目中跨域和axios封裝使用