解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題
更新時(shí)間：2024年07月12日 09:19:12 作者：我真的好想笑
這篇文章主要介紹了解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
配置setupProxy.js代理，頁(yè)面報(bào)錯(cuò)404問(wèn)題
又遇到了一個(gè)問(wèn)題，就是更換解決跨域問(wèn)題方式時(shí)，配置setupProxy.js代理后，可以正常啟動(dòng)，但是報(bào)404訪問(wèn)不到頁(yè)面。
原因是
// setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api/**', { //`api`是需要轉(zhuǎn)發(fā)的請(qǐng)求
target: 'http://127.0.0.1:8083', // 這里是接口服務(wù)器地址
changeOrigin: true,
})
)
}更改為
// setupProxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
createProxyMiddleware('/api/**', { //`api`是需要轉(zhuǎn)發(fā)的請(qǐng)求
target: 'http://127.0.0.1:8083', // 這里是接口服務(wù)器地址
changeOrigin: true,
})
)
}即可?。?！
proxy代理顯示404但請(qǐng)求方式、服務(wù)器地址都對(duì)
后端使用postman測(cè)試過(guò)，接口沒有問(wèn)題。
反復(fù)檢查后，確定是代理配置的問(wèn)題
但配置格式也沒錯(cuò)，由報(bào)錯(cuò)看，就是代理配置沒起作用。
解決方法
項(xiàng)目是vue-cli2 創(chuàng)建的 ，所以要在config文件夾里面的index.js配置才能生效
vue3項(xiàng)目里面才使用vue.config.js
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用sortablejs實(shí)現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實(shí)現(xiàn)拖拽排序問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux
這篇文章主要介紹了詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
ReactHooks批量更新state及獲取路由參數(shù)示例解析
這篇文章主要介紹了React Hooks如何實(shí)現(xiàn)批量更新state以及獲取路由參數(shù)的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-10-10
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個(gè)階段：掛載，更新，卸載，錯(cuò)誤處理，本文主要介紹了這個(gè)階段，感興趣的可以了解一下2021-06-06
由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來(lái)支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法
這篇文章主要介紹了react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了React useCallback鉤子的作用方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12