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


最新幾天學了一下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,先寫一個登錄的函數,然后在組件渲染完之后執行該函數

打開瀏覽器查看返回結果

方法二:

我們可以先把所有的api都列出來,然后在用export導出去,如下

組件中使用

瀏覽器結果

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


免責聲明!

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



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