vite+vue跨域
vue3学习中被问到一个问题:怎么解决跨域?
在vue之前的web中,解决跨域的问题最常用有效的方法服务器代码中添加Access-Control-Allow-Origin的响应header,告诉浏览器不阻拦当前地址的请求。假设服务器不允许修改响应header,还有一种称为jsonp的技术,http://localhost?callback=func(),请求完成后自动执行回调函数,这种方法似乎不是很适合vue中使用。因此vue的前后端分离的项目中怎么解决跨域呢?
axios.get("http://localhost/api/request.php").then(function (response) { console.log(response); });
后端请求地址:http://localhost/request.php,前端地址使用vite默认的:http://127.0.0.1:5173/
由于项目使用vite构建,在vite的文档中找到了答案,在本地服务器中开启代理,将对后端服务器的请求,转化成对前端服务器的请求,如此则不存在跨域问题,前端服务器再去请求真正的后台服务器,最后前端服务器再将请求回来的数据返回给浏览器。
新增vite.config.js,在文件中添加以下代码(主要是server中proxy配置代理的配置):
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], server: { proxy: { "/api": { target: "http://localhost/", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, });
请求:
axios.get("/api/request.php").then(function (response) { console.log(response); });
过程中踩的坑:
习惯了使用vscode的插件phpserver,在页面上右键直接运行当前php文件,显示正常
然后将上面server的proxy配置的target改为 "http://localhost:3000/",命令行却出错了,前端请求的地址也没有得到正确的响应。
这个问题困扰我很久,然后换到xampp的 http://localhost/ 前端请求得到了正确的响应。
分类:
vue3
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了