react axios配置代理(proxy),如何解決本地開發(fā)時(shí)的跨域問(wèn)題
前言
本文基于
“react”: “^18.2.0”
1.暴露隱藏的webpack配置
react官方腳手架默認(rèn)是將 webpack 配置隱藏起來(lái)了,在進(jìn)行配置之前需要將 webpack 配置暴露出來(lái)
yarn eject
會(huì)出現(xiàn)一個(gè)命令提示:這是一個(gè)單向操作,確認(rèn)操作后不可逆轉(zhuǎn)/返回?
輸入 y 回車
成功之后 在項(xiàng)目根目錄會(huì)出現(xiàn)一個(gè) config 文件夾
2.配置代理Proxy
打開 config 文件夾下的 webpackDevServer.config.js 文件
搜索 proxy 找到配置項(xiàng)
參照如下格式,配置代理
proxy: { '/api': { target: 'http://localhost:9000', // 后臺(tái)服務(wù)地址以及端口號(hào) ws: true, changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' } } },
3.在項(xiàng)目中使用
/api + 后臺(tái)接口地址
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.接口請(qǐng)求示例
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ahooks useVirtualList 封裝虛擬滾動(dòng)列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動(dòng)列表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01Rect Intersection判斷兩個(gè)矩形是否相交
這篇文章主要為大家介紹了Rect Intersection判斷兩個(gè)矩形是否相交的算法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06