vite配置代理（跨域）问题，配置错误会404

最新推荐文章于 2024-04-14 01:00:45 发布

reshuibujieke

最新推荐文章于 2024-04-14 01:00:45 发布

阅读量2.2k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/reshuibujeke/article/details/129261959

版权

vite.config.js里如下配置

server: {

    proxy: {

      '/api': {

        target: 'http://127.0.0.1:3000',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ''),

      }

    }

  }

vite和webpack里配置不同，建议查看官方文档：开发服务器选项 | Vite 官方中文文档 (vitejs.dev)

优惠劵

reshuibujieke

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vite配置代理（跨域）问题，配置错误会404

vite配置代理（跨域）
复制链接

扫一扫

【JavaScript】关于解决JS 计算精度问题（toFixed, Math.round, 运算表达式）

老司机的后备箱

05-11

1392

前言最近在做一个ERP的项目，里面涉及到了很多的计算，尤其特别是有很多关于浮点数的计算，然后就碰到了下面的问题。问题描述 & 解决方案 1.使用toFixed or Math.round进行四舍五入&保留两位小数会有5不进1的情况举个🌰，我在开发的过程中遇到了321201.595这个数字… 然后我想对他进行四舍五入 & 保留两位小数，一开始不太了解 toFixed有那么多坑，所以直接用的.toFixed(2)，结果如下： const number = 321201.595; c

vite2.0+vue3.2部署404问题

qq_38712009的博客

03-23

5872

项目打包后放在nginx上刷新页面404问题 vite2.0+vue3.2 项目在本地运行没问题，扔到服务器上刷新之后页面404 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; }

参与评论您还未登录，请先登录后发表或查看评论

Vue前端proxy代理解决完跨域问题后报错404(Not Found)

angrynouse的博客

07-28

3595

Vue前端proxy代理解决完跨域问题后报错404(NotFound)

vue3配置代理--[vite] http proxy error_[vite] http proxy error

最新发布

2301_77116622的博客

04-14

293

这样配置, 通用性更高一些。server: { // 中转服务器proxy: { // 通过代理实现跨域,搭理这个地址http://localhost:8081'/path': { // 路径, 作为就是替换域名target: 'http://127.0.0.1:8081', // 表示要替换的服务端地址changeOrigin: true, // 表示开启代理, 允许跨域请求数据secure: false, // 如果是https接口，需要配置这个参数。

使用nodejs中httpProxy代理时候出现404异常的解决方法

12-23

在公司中使用nodejs构建代理服务器实现前后台分离，代码不能拿出来，然后出现httpProxy代理资源的时候老是出现404.明明被代理的接口是存在的。代码大概如下： var http = require('http'), httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { proxy.web(req, res, { target: 'http://www.cnblogs.co

vue3+vite 配置代理后不生效404

qq_64209130的博客

06-30

8144

在重写路径的时候需要看接口有没有统一的前缀,如果有的话充写路径就需要重写到代理路径(这种情况要注意的一点是代理路径和统一前缀要一样),如果没有统一的前缀,重写路径要指向空(有统一前缀但是代理路径与统一前缀不一样也指向空)在检查服务器地址没有问题,接口地址也没有问题,用postman访问接口也能正常返回的情况下,可以看看vite.config.ts中proxy的rewrite。在开发环境中axios的baseUrl直接设为/api就可以正常访问接口了。proxy是配置代理的,rewrite是用来重写路径的。

React ts模式使用http-proxy-middleware代理时访问报404

pgLi

08-06

3087

create-react-app脚手架创建Recat应用，选择的是TypeScript 根据http-proxy-middleware文档在src目录创建setupProxy.js，一直报错 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( createProxyMiddleware('/custom',

vue proxy代理显示404 原因竟是它？！

王吉吉的博客

07-07

6649

先来一波报错图，404？参数，请求方式，服务器地址都对百思不得其解首先，后端说postman测试过了接口没问题，排除后端问题；所以只能找代理配置问题看来看去格式也没错，就是这么写的然后知道我认真的看了项目目录才发现，尼玛这项目vue-cli版本是2！所以要把代理写在config文件夹里的index才行，开头的写法适用于vue/cli 3 和4 然后就ok了，真尼玛尴尬 ...

奇葩问题：前端vite.config.js 代理不生效

asdasduyggbjb的博客

11-13

802

将locahost换成127.0.0.1即可。具体原因不明......

vue-socket.io跨域问题有效解决方法

10-15

在本篇文章里小编给大家整理的是关于vue-socket.io跨域问题有效解决方法，对此有兴趣的朋友们可以参考下。

webpack里如何配置反向代理，怎样配置反向代理，webpack配置反向代理(前后端联调)，如何用反向代理解决跨域问题

01-20

反向代理解决的就是跨域，在前后端联调的情况下，前端有服务器，后端也有服务器，那么联调时，就存在跨域问题三、反向代理的原理通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，...

SpringBoot 跨域问题的解决方案

08-25

主要介绍了SpringBoot 跨域问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

ElementPlus按需自动导入VITE配置

03-08

自动导入使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。这里导入的ElementPlus 使用格式：名称 /> 例子：图标名称，直接看官网...

vite-plugin-pwa：Vite的零配置PWA

02-05

:information_selector: v0.3.x支持Vite 2， v0.3.x支持Vite 1。 npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-...

vue3 + vite2 打包部署后 404 解决方案

03-24

1万+

vue3 + vite2 打包部署后 404 解决方案 404现象解析如果在开发环境没问题，但是部署后（部署到服务器的非根目录的情况时）出现很多相关的js，css文件报404，那么可以看一下index.html中的资源引用，如果都是/assets开头，那么这个时候就需要修改配置文件，重新打包了。解决办法在vue2中我们在config/index.js文件中配置了 assetsPublicPath:’./’，同理，vue3中也需要配置这个属性，vue3中vite生成的项目，没有config文件夹，

vue.config.js代理配置不生效，搞不明白了

Kg_tac的博客

08-04

214

搞不明白了跨域设置完全不生效。

vue3 axios代理配置报404

weixin_42773941的博客

01-08

5303

vue3 代理配置报404 需要调用的接口 http://192.168.1.21:8080/face/f/getGenGoodsClassAndGenGoodsBySize?pageSize=10&pageNo=1 错误的代理配置 module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/online...

Vue Cli3.0以上配置vue.config.js时候的Proxy不成功问题的解决方法的参考

lichunjiang_的博客

07-21

3342

Vue Cli3.0以上配置vue.config.js时候的Proxy不成功问题的解决方法的参考首先vue.config.js这个文件得放在根目录，就是和Package.json一样的地方 module.exports = { publicPath:"./", devServer:{ port: 8848, open: true, //浏览器自启动 // 配置的代理接口，每改一点，都得重启vue项目。 proxy:{ //配置代理 "/a

vite.config.js文件配置代理设置VITE_APP_BASE_API

九亿宅男的梦的博客

10-24

1549

hmr: true, // vue3 vite配置热更新不用手动刷新。open: false, // 启动项目后打开浏览器。port: 3000, // 端口。.env.development文件。.env.production文件。

vue3配置代理跨域vite

03-28

要在 Vue3 中配置代理跨域，需要使用 Vite 构建工具。以下是一个简单的示例，展示了如何在 Vite 中配置代理跨域： 1. 安装依赖首先，需要安装 `http-proxy-middleware` 依赖： ``` npm install http-proxy-middleware --save-dev ``` 2. 配置代理在 `vite.config.js` 中，可以使用 `createProxyMiddleware` 函数来配置代理： ``` import { createProxyMiddleware } from 'http-proxy-middleware'; export default { server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } }, // other options } ``` 上述代码中，我们将以 `/api` 开头的请求代理到 `http://localhost:3000`，并使用 `changeOrigin` 选项来修改请求头中的 `Host` 字段，确保代理成功。我们还使用了 `pathRewrite` 选项来删除 `/api` 前缀，以便在目标服务器上能够正确处理请求。 3. 启动项目现在，可以启动项目并测试代理是否工作正常： ``` npm run dev ``` 如果一切正常，你应该能够在浏览器中访问 `http://localhost:3000/api`，并获得来自代理服务器的响应。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交