vue3中如何解决跨域问题（真正意义上的一行代码解决跨域）

最新推荐文章于 2024-05-20 09:30:00 发布

蓝斑.json

最新推荐文章于 2024-05-20 09:30:00 发布

阅读量1.5k

点赞数 10

本文链接：https://blog.csdn.net/m0_73358221/article/details/135414842

版权

vue 同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

javascript

36 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue3项目中通过vue.config.js的代理功能处理跨域，包括设置目标后端服务器和重写路径策略。

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

在使用 Vue 3 时，解决跨域问题通常涉及对开发服务器的配置和可能的后端更改。以下是一些常见的方法：

使用 Vue CLI 的代理配置

如果你使用 Vue CLI 创建的项目，可以在 vue.config.js 文件中配置一个代理。这个代理会将前端开发服务器的某些请求转发到不同的后端服务器，从而绕过浏览器的同源策略。

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://backend-server.com',  // 后端服务地址
                changeOrigin: true,  // 允许改变源
                pathRewrite: {
                    '^/api': ''  // 将路径中的 /api 替换为空
                }
            }
        }
    }
};

所有发送到 /api 的请求都会被代理到 http://backend-server.com。