Vue中-前端利用proxy解决跨域问题

最新推荐文章于 2025-06-26 21:42:23 发布

原创

最新推荐文章于 2025-06-26 21:42:23 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了浏览器的同源策略导致的跨域问题，并详细阐述在Vue脚手架中如何通过设置proxy来解决跨域。通过修改axios的baseURL为'/proxy'，并配置相关接口，实现了前端跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是跨域？

跨域问的是因为浏览器的同源策略，浏览器安全机制，

控制台报错方式：

Access to XLMHttpRequest at ''http------***"from orgin"http//localhost:8081"-------------

并存在：Access-Control-Allow-Origin 单词，

2、解决跨域问题（只限制在vue脚手架中，在广大大神的带领下只解决了这个问题，尴尬）

步骤1、

在文件vue.config.js文件中（没有直接创建，和package.json同文件夹）


module.exports = {
devServer: {
        proxy: {
            '/proxy': {
                target: 'http://352.578.214/shiyan/',
                changeOrigin: true, // 是否允许跨域
                secure: false, // 关闭SSL证书验证https协议接口需要改成true 
                pathRewrite: { // 重写路径请求
                    '^/proxy': '' //路径重写(很重要) 
                }
            },
            // ....
        }
    }
}

步骤2、

在创建axios实