问题描述

vue3+vite 前后端分离项目
后端接口url (http://127.0.0.1:3000) 、前端url (http://192.168.124.7:5173) 不一致，前端无法向后端请求数据，如下图↓

解决方法 | 配置vite跨域

参考

重点：

houD - 后端url统一请求参数
target - 后端url

server: { proxy: {'/houD': {target: 'houDUrl/houD', rewrite: (path) => path.replace(/^\/houD/, '') // 不可省略 }}
}

例子

例子参考

例如后端统一请求参数是/api
当请求url有/api时，自动转为http://127.0.0.1:3000/api

export default defineConfig(
{base: "./",server: { proxy: {'/api': {target: 'http://127.0.0.1:3000/api', rewrite: (path) => path.replace(/^\/api/, '') // 不可省略 }}},
}
)

使用参考

使用的时候直接/api/xxxx
不用全写http://127.0.0.1:3000/api/login?u=1&p=2

axios.post('/api/login?u=1&p=2'))

【vite+vue3】vite代理 | 同源策略 | Access to XMLHttpRequest at | CORS || Access-Control-Allow-Origin相关推荐

解决前端跨域的问题.Access to XMLHttpRequest at http://xxx.xxx from origin 'http://localhost:8000' has been bl
1.前端浏览器报错如下: Access to XMLHttpRequest at http://xxx.xxx from origin 'http://localhost:8000' has been ...
【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
[ecshop 经验 ]transport.js run error 68ecshop 小京东火狐提示同源策略和跨域访问 68ecshop
transport.js run error 68ecshop 小京东 transport.js run error 68ecshop 小京东火狐提示同源策略和跨域访问 cros access ...
浏览器的同源策略和跨域请求_学习版
目录同源策略 : 跨域请求 : 跨域请求的常见解决方案 : 1. jsonp 2. cors(跨域资源共享) 3. proxy(代理) 同源策略 : 什么是同源策略 ? + 同源策略是浏览器 ...
Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy:
Access to XMLHttpRequest at 'http://xx' from origin 'http://xx' has been blocked by CORS policy: 问题解 ...
vite vue3 代理发布不停自动刷新的问题
问题描述: 今天帮朋友处理一个问题,前端使用的项目是vue3 + vite 环境开发的.在使用vs进行运行的时候,本地访问没问题,使用nginx本地代理访问也没有问题,但是使用代理的时候,发现页面不停 ...
Vite+Vue3+TypeScript
2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...
Vite+Vue3+TypeScript基础知识案例
Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2.0已经很完善了,很多 ...
使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...

【vite+vue3】vite代理 | 同源策略 | Access to XMLHttpRequest at | CORS || Access-Control-Allow-Origin

问题描述

解决方法 | 配置vite跨域

参考

例子

例子参考

使用参考

【vite+vue3】vite代理 | 同源策略 | Access to XMLHttpRequest at | CORS || Access-Control-Allow-Origin相关推荐

最新文章

热门文章