vue3 + vite proxy解决跨域问题

最新推荐文章于 2024-07-21 22:29:47 发布

xiongzihaoc

最新推荐文章于 2024-07-21 22:29:47 发布

阅读量4.3k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45020480/article/details/119930120

版权

本文档展示了如何使用Vite配置Vue.js项目，包括设置服务器监听的端口为9090，开启自动打开浏览器功能，以及创建针对'/api'路径的代理，将请求转发到'http://test-api.xxx.com'，确保跨域访问。同时，定义了别名'@'指向'src'目录，方便模块导入。

摘要由CSDN通过智能技术生成

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

export default defineConfig({

server: {

port: 9090,

open: true,

proxy: {

'/api': {

target: 'http://test-api.xxx.com',

changeOrigin: true,

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

ws: false

}

plugins: [vue()],

resolve: {

alias: {

'@': resolve(__dirname, 'src')

}

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiongzihaoc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3+vite用proxy解决跨域及proxy原理解析

Web_boom的博客

06-21

1万+

前端跨域的方式是面试八股文中常见的一部分，最近面试中也是被问到跨域的问题，跨域的解决方案无非就是几个本地项目中调试用的最多的就是 node代理如果是跨域，你将会发现下图的报错，经典的跨域问题，前端和后端都是我的本地项目，但仅仅是端口的不同，浏览器请求就发生了跨域的问题先开启一个后端node服务由于需要用到一个后端接口来测试是否能够发生跨域效果，我们利用node开启一个服务，在vue项目之外开启一个node文件，然后执行以下代码 vscode中可以直接下载一个工具用来跑node文件，直接右键就能运行,非常

vue3+vite跨域问题

好好学习，天天向上

06-18

1033

vue3+vite跨域问题、vite.config.js

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

Vue3项目（由Vite构建）中通过代理解决跨域问题

聂可以的博客

05-20

6964

Vue3项目（由Vite构建）中通过代理解决跨域问题

Vite代理解决跨域问题

Harris-H的博客

10-09

1万+

Vite代理解决跨域问题

Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）

最新发布

m0_67725787的博客

07-21

906

【代码】Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）

VUE3+Vite，解决跨越

family20102010的博客

01-14

1294

监控网络，发现URL竟然是：http://localhost:38080/api/axios，并不是http://localhost:38081/axios，但是实际确实访问了服务器http://localhost:38081/axios。vue中使用axios发起get请求部分的代码如下，其中服务器的URL是：“http://localhost:38081/axios”2.修改get请求部分的URL，这里的“/api”等效于’http://localhost:38081’好了，跨域问题解决了。

在vite中如何解决跨域问题

z020729的博客

08-13

5998

本篇文章主要说明在vite中如何解决跨域问题，相信你看完这篇文章会有更深的理解。

解决vue3+vite跨域失败问题

qq_52014705的博客

04-14

4806

解决vue3+vite跨域失败，解决vite中配置不生效问题

vue3+vite项目跨域配置（踩坑无数篇）

weixin_52084329的博客

10-25

6003

写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的bug卡了两整天…废话不多说啦，开篇入题叭，希望大家都能改好自己的bugggggg！！！

Vue3 + Vite+ Element-Plus + TypeScript 搭建系统

weixin_45044818的博客

12-04

1374

一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。

vue+axios+proxy解决前端跨域问题

hope2019的博客

04-09

1250

安装axios，网上有很多教程在vue项目的根目录下创建vue.config.js文件（与package.json文件同级）。记住，一定要在根目录下！！！配置如下信息： // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 const path = require('path');//引入path模块 function re.

Vite配置Proxy代理解决跨域问题

热门推荐

~~~

05-29

2万+

vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。

Vue 项目解决跨域问题

天渺(喵)工作室

09-10

377

vue 项目中解决接口跨域的方法 1.简单粗暴直接用jquery 的jsonp 来调用跨域跨域接口直接npm install vue-jsonp --save 安装依赖 import Vuejsonp from'vue-jsonp; //实例化一次 ... Vue.use(Vuejsonp) ... this.$jsonp.then((e)=>{}); //其实这个插件就是用的jquery的jsonp 和用jquery 一样的如果项目本身引用了jq 那就用jq 的ajax的jso

【彻底搞懂】vite proxy如何解决跨域问题

IICOOM的博客

05-11

2108

这样前端就是从相同的host 并且相同的port发起的请求，代理通过前缀"/api"匹配的你要转发的请求，转发到’http://localhost:3000’真正的后端服务，并且把多余的前缀给你替换掉。关于这个问题，网络上充斥着大量的错误方法，一不小心就会被误导。关键的点来了，你的前端发起请求的baseUrl应该是 http://localhost:5173/api。场景描述：本地起了两个服务。

vue3跨域请求及一些常用配置

weixin_42371812的博客

01-22

5754

3、上面两步都完成后，我们就可以正常来请求我们的接口了。当然，为了以后更方便的维护自己的代码，业内也一般会有一个规范（当然，也不是一定得这样）。在使用vue3开发的时候，总免不了做一些基础的配置。接下来，我就做一些自己在在开发中所运用到一些常用配置。其实，对于跨域配置，我之前的博文中也有说过，在这儿我也就大概再讲一次。目录（其实文件夹的名字可以随意，但为了规范【网上也是多是这样子的名字】），之后在该目录下新建一个。文件中配置，网上有说这个文件不能配置，经测试，也没啥毛病。，再在api目录下新建一个。

vue3+vite 配置请求代理

weixin_61211370的博客

08-16

1万+

vue3+vite 配置请求代理

vue项目使用proxy代理解决跨域及nginx配置

Oralinge

08-20

7736

在vue.config.js中配置 proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } target：接口域名； chang...

vue3+vite接口跨域处理

lyna的博客

05-19

1960

出于浏览器的同源策略限制，当一个请求url的协议（https）、域名（www.xxx.com）、端口（8080）三者之间任意一个与当前页面url不同即为跨域。在vue3项目中，前端可以通过配置proxy来实现。在前后端分离的项目中，经常会出现跨域的问题。

vue3 + vite 配置跨域请求

05-12

在 Vue3 中使用 Vite 进行跨域请求配置的步骤如下： 1. 在 `vite.config.js` 文件中添加以下代码： ```javascript export default { server: { proxy: { '/api': { target: 'http://localhost:3000', // 代理的目标地址 changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') // 将请求路径中的 /api 去掉 } } } } ``` 2. 在 Vue3 组件中发起请求时，请求路径前加上 `/api` 前缀，如下： ```javascript // 发起 GET 请求 fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)) // 发起 POST 请求 fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'admin', password: '123456' }) }).then(response => response.json()) .then(data => console.log(data)) ``` 这样配置后，Vite 会自动将请求转发到 `http://localhost:3000` 这个地址，从而实现跨域请求。注意，如果你使用的是 Vue CLI 来搭建项目，则需要在 `vue.config.js` 文件中进行配置。