react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題
更新時間：2023年07月04日 09:22:07 作者：好巧.
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
本文基于
“react”: “^18.2.0”
1.暴露隱藏的webpack配置
react官方腳手架默認(rèn)是將 webpack 配置隱藏起來了，在進(jìn)行配置之前需要將 webpack 配置暴露出來
yarn eject
會出現(xiàn)一個命令提示：這是一個單向操作，確認(rèn)操作后不可逆轉(zhuǎn)/返回?
輸入 y 回車
成功之后 在項(xiàng)目根目錄會出現(xiàn)一個 config 文件夾
2.配置代理Proxy
打開 config 文件夾下的 webpackDevServer.config.js 文件
搜索 proxy 找到配置項(xiàng)
參照如下格式，配置代理
proxy: {
'/api': {
target: 'http://localhost:9000', // 后臺服務(wù)地址以及端口號
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: { '^/api': '/' }
}
},
3.在項(xiàng)目中使用
/api + 后臺接口地址
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
componentDidMount() {
axios.get('/api/logout')
.then(res => {
console.log(res);
})
}
}
export default App;4.接口請求示例
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在React中Redux原理,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
最近在處理項(xiàng)目代碼的時候,出現(xiàn)了一個bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細(xì)給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下2024-01-01
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了React事件處理和表單的綁定，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
useEffect中return函數(shù)的作用和執(zhí)行時機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機(jī),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家介紹了React中classnames庫使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了Rect Intersection判斷兩個矩形是否相交的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本文主要介紹了React腳手架搭建的學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12