跨域解决方案

跨域解决方案:

1.后端配置:在Controller类上添加@CrossOrigin注解。

java 复制代码
@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")
@RestController@RequestMapping(value = "/api/v1/customers", produces = MediaType.APPLICATION_JSON_VALUE)
public class CustomerApi {

2.前端配置:在vite.config.js中配置跨域。此时,axios发送请求时,可使用相对路径,会被自动代理为后端服务器路径。

javascript 复制代码
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from "vite-plugin-vue-devtools";
import {resolve} from "path";
export default defineConfig({
    plugins: [vue(), vueDevTools()],
    server: {
        host: "localhost",
        port: 5173,
        open: true,
        proxy: {
            "/api":{
                target: "http://localhost:8080",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '/api/v1')
            }
        }
    },
})
相关推荐
猪哥帅过吴彦祖4 小时前
JavaScript Set 和 Map:现代 JavaScript 的数据结构双雄
前端·javascript·面试
ldj20205 小时前
下拉默认全选,选择展示对象的字段list
前端·javascript
掘金安东尼5 小时前
React 19 发布:useTransition 平滑异步过渡!
前端·javascript·github
用户47949283569155 小时前
ESLint支持多线程Linting啦
前端·javascript·面试
SleepyZone5 小时前
使用 Async Generator 实现 Agent 流式输出与流程控制
javascript·agent·ai编程
猪哥帅过吴彦祖6 小时前
JavaScript Symbol:那个被忽视的"隐形"数据类型
前端·javascript·面试
薛定谔的算法6 小时前
面试官问你知道哪些es6新特性?赶紧收好,猜这里一定有你不知道的?
前端·javascript·面试
用户47949283569156 小时前
🚀 打包工具文件名哈希深度解析:为什么bundle.js变成了bundle.abc123.js
前端·javascript·面试
晴空雨6 小时前
遇到第三方库 bug 怎么办?5 种修改外部依赖的方法帮你搞定
前端·javascript·架构
Jacob02348 小时前
JavaScript 的进化之旅 Part 2:现代特性与算法优化实战
前端·javascript·性能优化