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)文章
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09useEffect中return函數(shù)的作用和執(zhí)行時機解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01