跨域问题为什么会产生，如何解决跨域问题(Vue)

最新推荐文章于 2025-09-28 23:30:00 发布

原创最新推荐文章于 2025-09-28 23:30:00 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细探讨了前端开发中的跨域问题，介绍了JSONP作为解决手段，CORS后端响应头的应用，以及通过Vue.config.js进行代理转发的实践。重点在于如何通过配置实现前后端通信的跨域处理。

一. 跨域问题产生的原因：

前端请求地址和后端服务器地址不同
如果二者：域名，协议，端口号有一个不相同，就会产生跨域问题
注意：本质上还是浏览器的同源策略(域名，协议，端口号三者完全相同)

二. 解决方案

前端用JSONP方式去发请求
后端写代码(CORS)在响应中添加必要的响应头
代理转发（前端操作）

三. 代理转发实操

在vue.config.js 文件中添加如下配置

module.exports = {
  devServer: {
    // 代理转发
      proxy: {
       // .env.development 文件中   VUE_APP_BASE_API = '/dev_api'
      '/dev_api': {
           //服务器请求的地址
           target: 'http://localhost:3000/',
           // 是否跨域 布尔值（true/false）
           changeOrigin: true,
           // 路径重写    如果，所有的请求路径都没有 '/api' ,可以将其替换为空字符串''
           pathRewrite: {
          '/dev_api': '/api'
        }
      }
    }
  }
}