vite跨域配置踩坑,postman鏈接后端接口正常,但是前端就是不能正常訪問

問題一:怎么都鏈接不了后端地址

根據以下配置,發現怎么都鏈接不了后端地址,proxy對了呀。?仔細看,才發現host有問題

// 本地運行配置,及反向代理配置server: {host: '0,0,0,0',port: 80,// cors: true, // 默認啟用并允許任何源// open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序//反向代理配置,注意rewrite寫法,開始沒看文檔在這里踩了坑proxy: {// 本地開發環境通過代理實現跨域,生產環境使用 nginx 轉發'/api': {target: 'http://localhost/8090', // 通過代理接口訪問實際地址。這里是實際訪問的地址。vue會通過代理服務器來代理請求changeOrigin: true,ws: true,  // 允許websocket代理rewrite: (path) => path.replace(/^\/api/, '') // 將api替換為空}}}

?這里是本地前端訪問地址配置,不設置默認http://127.0.0.1:5173/都可以訪問,但是如果設置了只有設置的?http://127.0.0.1:80/或者http://localhost:80/可以訪問

    host: '0,0,0,0',port: 80,

問題來了:設置為port80,host:0,0,0,0或者host: '127.0.0.1',時,請求后端報404。不設置時就能正常訪問。

原因:開發服務器選項 | Vite 官方中文文檔

簡單的說就是,設置為0000或者127.0.0.1:80可能監聽的是其他服務端口,導致跨域失敗。

指定服務器應該監聽哪個 IP 地址。 如果將此設置為?0.0.0.0?或者?true?將監聽所有地址,包括局域網和公網地址。以下時vite官網內容:

問題二:[vite] ws proxy error: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

本來已經能成功訪問了,但是后面又報錯

15:47:05 [vite] ws proxy error:
Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

原因:發現代理的地址有問題target: 'http://localhost:8090'寫成了target: 'http://localhost/8090',服了。可能之前訪問成功也是因為改了這里

測試一下改回來:發現真的不是問題一那里的問題,噗,哈哈哈哈哈哈哈哈哈

 server: {host: '127.0.0.1',//設置為0000或者127.0.0.1:80可能監聽的是其他服務端口,導致跨域失敗port: 80,// cors: true, // 默認啟用并允許任何源// open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序//反向代理配置,注意rewrite寫法,開始沒看文檔在這里踩了坑proxy: {// 本地開發環境通過代理實現跨域,生產環境使用 nginx 轉發'/api': {target: 'http://localhost:8090', // 通過代理接口訪問實際地址。這里是實際訪問的地址。vue會通過代理服務器來代理請求changeOrigin: true,ws: true,  // 允許websocket代理rewrite: (path) => path.replace(/^\/api/, '') // 將api替換為空}}}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/36309.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/36309.shtml
英文地址,請注明出處:http://en.pswp.cn/news/36309.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

爆肝整理,性能測試方法與關鍵指標以及瓶頸定位思路,一篇貫通...

目錄:導讀 前言一、Python編程入門到精通二、接口自動化項目實戰三、Web自動化項目實戰四、App自動化項目實戰五、一線大廠簡歷六、測試開發DevOps體系七、常用自動化測試工具八、JMeter性能測試九、總結(尾部小驚喜) 前言 性能測試方法 1、…

Python編程實現百度AI開放平臺的接口對接方法,詳解和實踐指南

Python編程實現百度AI開放平臺的接口對接方法,詳解和實踐指南 引言 百度AI開放平臺提供了豐富的人工智能接口,包括語音識別、圖像識別、自然語言處理等功能。本文將通過Python編程,詳解如何對接百度AI開放平臺的接口,并提供實際代碼示例。準備工作 在開始之前,我們需要先完…

智能家居(1)---工廠模式實現燈光控制(繼電器組)以及火災報警模組的封裝

采用工廠模式以面向對象的方式來封裝各種設備模塊&#xff0c;方便整合項目以及后期的維護和擴展 mainPro.c&#xff08;主函數&#xff09; #include <stdio.h> #include "controlDevice.h"struct Devices *pdeviceHead NULL; //設備工廠鏈…

抓包工具Fiddler下載與安裝

一、Fiddler介紹 1.Fiddler簡介 Fiddler 是一款免費、靈活、操作簡單、功能強大的 HTTP 代理工具&#xff0c;是目前最常用的 HTTP 抓包工具之一。可以抓取所有的 HTTP/HTTPS 包、過濾會話、分析請求詳細內容、偽造客戶端請求、篡改服務器響應、重定向、網絡限速、斷點調試等…

數據結構刷題訓練:隊列實現棧

目錄 前言 1. 題目&#xff1a;使用隊列實現棧 2. 思路 3. 分析 3.1 創建棧 3.2入棧 3.3 出棧 3.4 棧頂數據 3.5 判空和 “ 棧 ” 的銷毀 4. 題解 總結 前言 我們已經學習了棧和隊列&#xff0c;也都實現了它們各自的底層接口&#xff0c;那么接下我們就要開始棧和隊列的專項刷…

go內存管理機制

golang內存管理基本是參考tcmalloc來進行的。go內存管理本質上是一個內存池&#xff0c;只不過內部做了很多優化&#xff1a;自動伸縮內存池大小&#xff0c;合理切割內存塊。 基本概念&#xff1a; Page&#xff1a;頁&#xff0c;一塊 8 K大小的內存空間。Go向操作系統申請和…

2.Model、ModelMap和ModelAndView的使用詳解

1.前言 最近SSM框架開發web項目&#xff0c;用得比較火熱。spring-MVC肯定用過&#xff0c;在請求處理方法可出現和返回的參數類型中&#xff0c;最重要就是Model和ModelAndView了&#xff0c;對于MVC框架&#xff0c;控制器Controller執行業務邏輯&#xff0c;用于產生模型數據…

Spring Cloud構建微服務斷路器介紹

什么是斷路器 斷路器模式源于Martin Fowler的Circuit Breaker一文。“斷路器”本身是一種開關裝置&#xff0c;用于在電路上保護線路過載&#xff0c;當線路中有電器發生短路時&#xff0c;“斷路器”能夠及時的切斷故障電路&#xff0c;防止發生過載、發熱、甚至起火等嚴重后果…

【Redis】使用Docker鏡像配置集群時的Operation timed out問題

不知道有沒有小伙伴跟我一樣是使用的Docker鏡像進行Redis集群案例模擬的&#xff08;三臺虛擬機確實帶不動 &#xff09;&#xff0c;然后我遇到了一個問題&#xff1a;Could not connect to Redis at 172.17.0.2:6379: Operation timed out 172.17.0.2是我其中一個Redis實例的…

如何測試Linux磁盤的讀寫速度

在Linux系統中也有很多命令可以測試硬盤的讀寫速度指標。以下是幾個常用命令&#xff08;注意&#xff1a;在執行測試命令之前&#xff0c;請務必備份數據以避免數據丟失&#xff01; 1、dd 命令 首先掛載磁盤 mount /dev/sdb /testdd 命令可用于進行硬盤讀寫速度測試。 例…

uniapp踩坑之項目:判斷字符串長度自動調整選項卡寬度

利用動態:class來判斷字長調整選項卡uni-data-select 寬度 //html <view><view style"width:100%" :class"checkLength(text)>4 ? textexplode:textshrink"><uni-data-select v-model"value" :localdata"rangeTag"…

android 開發中常用命令

1.反編譯 命令&#xff1a;apktool d <test.apk> -o <folderdir> 其中&#xff1a;test.apk是待反編譯文件的路徑&#xff0c;folderdir是反編譯后的文件的存儲位置。 apktool d -f <test.apk> -o <folderdir> 注意&#xff1a;如果dir已經存在&am…

從零學算法34

34.給你一個按照非遞減順序排列的整數數組 nums&#xff0c;和一個目標值 target。請你找出給定目標值在數組中的開始位置和結束位置。 如果數組中不存在目標值 target&#xff0c;返回 [-1, -1]。 你必須設計并實現時間復雜度為 O(log n) 的算法解決此問題。 示例 1&#xff1…

React Native 在高IOS版本下無法顯示圖片的問題處理

圖片在低ios版本下可以看到圖片&#xff0c;在高版本ios下顯示不了圖片 直接上解決方法 找文件 /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m 修改源碼 原代碼 if (_currentFrame) {layer.contentsScale self.animatedImageScale;layer.contents…

php中nts和ts

PHP語言解析器:官方提供了2種類型的版本&#xff0c;線程安全(TS)版和非線程安全(NTS)版 TS: TS(Thread-Safety)即線程安全&#xff0c;多線程訪問時&#xff0c;采用了加鎖機制&#xff0c;當一個線程訪問該類的某個數據時進行數據加鎖保護&#xff0c;其他線程不能同時進行訪…

您的網站不應該只提供一套通用 API

后端應該提供兩套 API&#xff0c;一套是外部使用的通用 API&#xff0c;服務特定的數據&#xff0c;另一套是自家使用的應用 API&#xff0c;服務特定的頁面。 在當今的web開發中&#xff0c;構建一個提供JSON服務的后端和一個渲染應用程序的前端是很流行的。我不太喜歡&…

【Sklearn】基于決策樹算法的數據分類預測(Excel可直接替換數據)

【Sklearn】基于決策樹算法的數據分類預測&#xff08;Excel可直接替換數據&#xff09; 1.模型原理1.1 模型原理1.2 數學模型 2.模型參數3.文件結構4.Excel數據5.下載地址6.完整代碼7.運行結果 1.模型原理 決策樹是一種基于樹狀結構的分類和回歸模型&#xff0c;它通過一系列…

MySql(干貨)

寫這篇博客的目的不是為了將介紹原理&#xff0c;而是為了Sql中的代碼操作屬實太多了&#xff0c;在這里進行一個匯總&#xff0c;方便查閱&#xff01;&#xff01;&#xff01; Sql分類 分類全稱說明 DDL Data Definintion Language數據定義語言&#xff0c;用來定義數據庫對…

微信小程序(由淺到深)

文章目錄 一. 項目基本配置1. 項目組成2. 常見的配置文件解析3. app.json全局的五大配置4.單個頁面中的page配置5. App函數6.tabBar配置 二. 基本語法&#xff0c;事件&#xff0c;單位1. 語法2. 事件3. 單位 三. 數據響應式修改四 . 內置組件1. button2. image3. input4. 組件…

k8s常用資源管理 控制

目錄 Pod&#xff08;容器組&#xff09;&#xff1a;Pod是Kubernetes中最小的部署單元&#xff0c;可以包含一個或多個容器。Pod提供了一種邏輯上的封裝&#xff0c;使得容器可以一起共享網絡和存儲資源 1、創建一個pod 2、pod管理 pod操作 目錄 創建Pod會很慢 Pod&…