react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題
更新時間：2023年07月04日 09:22:07 作者：好巧.
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
本文基于
“react”: “^18.2.0”
1.暴露隱藏的webpack配置
react官方腳手架默認(rèn)是將 webpack 配置隱藏起來了，在進行配置之前需要將 webpack 配置暴露出來
yarn eject
會出現(xiàn)一個命令提示：這是一個單向操作，確認(rèn)操作后不可逆轉(zhuǎn)/返回?
輸入 y 回車
成功之后 在項目根目錄會出現(xiàn)一個 config 文件夾
2.配置代理Proxy
打開 config 文件夾下的 webpackDevServer.config.js 文件
搜索 proxy 找到配置項
參照如下格式，配置代理
proxy: {
'/api': {
target: 'http://localhost:9000', // 后臺服務(wù)地址以及端口號
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: { '^/api': '/' }
}
},
3.在項目中使用
/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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
connect()是react-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，這篇文章主要介紹了react-redux的connect詳解,需要的朋友可以參考下2023-01-01
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個階段：掛載，更新，卸載，錯誤處理，本文主要介紹了這個階段，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Next.js搭建Monorepo組件庫文檔實現(xiàn)詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫文檔，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了react中context傳值和生命周期,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了react 國際化的實現(xiàn)代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
VSCode配置react開發(fā)環(huán)境的步驟
本篇文章主要介紹了VSCode配置react開發(fā)環(huán)境的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
在create-react-app中使用css modules的示例代碼
這篇文章主要介紹了在create-react-app中使用css modules的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
React編程模型之Project Reactor實際應(yīng)用實例
這篇文章主要介紹了React編程模型之Project Reactor實際應(yīng)用實例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
本文我們將介紹 React中組件的類別，以及如何創(chuàng)建和使用組件。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06