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