Vue2.x/Vue3.x跨域问题小白教程

最新推荐文章于 2025-09-24 23:07:23 发布

原创

最新推荐文章于 2025-09-24 23:07:23 发布 · 618 阅读

标签

#vue

收录于

本文是一篇针对Vue2.x和Vue3.x小白的跨域问题教程。首先解释了跨域的原因，即浏览器的同源策略。接着详细介绍了在Vue2.x中如何通过proxyTable和axios解决跨域问题，包括配置proxyTable和安装axios的步骤。对于Vue3.x，同样可以通过配置vue.config.js来处理跨域，具体方法与Vue2.x类似。

Vue2.x/Vue3.x跨域问题小白教程

跨域原因
Vue2.x版本跨域问题解决
Vue3.x跨域问题解决
- 发送请求页面

跨域原因

一个网站的js代码段去访问另一个网站时，由于安全原因，跨域访问是被各大浏览器所默认禁止的。浏览器中为了避免跨域使用了同源策略，同源策略就是两个项目具有相同的协议、域名、端口号，如果其中一个不相同则会出现跨域访问的问题。

Vue2.x版本跨域问题解决

proxyTable原理

找到config目录下的index.js文件

目录结构
代码案例

proxyTable: {
   
   
      '/api': {
   
   
        target: ' http://127.0.0.1:2018/',  //你的后台接口地址
        changeOrigin: true, //是否跨域
        pathRewrite: {
   
   
          '^/api': ''
        }
      }