vue 脚手架解决跨域问题

猫猫不是喵喵.2025-03-31 19:21

一、什么是跨域

一个URL地址是由三部分组成的，分别是域名、端口、协议，只要是两个URL地址有一个部分不是相同的，就是跨域。如下：

域名跨域：www.example.com 和 www.anotherexample.com

端口跨域：8080 和 8098

协议跨域：https 和 http 、 http 和 ftp 等等

二、为什么会跨域

跨域的本质就是浏览器限制了请求的发送，只是在浏览器的页面中存在跨域一说。这是由于浏览器的同源策略引起的，同源策略是一种安全机制，用于防止一个网页获取另一个域名下的敏感信息。

在后端没有开启cors的情况下，浏览器的同源策略会直接限制后端返回的数据给到前端。这是因为我们目前所有的项目都是前后分离，前端一个服务，后端一个服务，后端不开cors只能前端处理。

代理如何解决跨域呢？前端的请求不能直接到达后端，那就找一个中间代理，前端和中间代理之间域名、端口、协议都一致，就不会发生跨域问题。当请求到达代理服务器后，由代理服务器向后端发送请求。刚才不是说跨域是由域名、端口、协议不一致引起的吗？为什么代理服务器和后端之间确没有跨域呢？这是因为跨域是浏览器限制了请求，只是针对浏览器而言的。代理服务器是node, node 向后台发送请求自然不会有问题了。

三、解决跨域

在 vue.config.js 配置文件配置

复制代码

 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      "/api": {   // 只要路径中带有 /api 这个路径，就会跳转到目标地址，并拼接后面的请求地址
        target: 'https://heimahr.itheima.net'  // 这里填写目标地址，即需要向哪台服务器请求数据，就写哪个服务器地址
      }
    }
    // before: require('./mock/mock-server.js')  // 基础模板做的模拟数据，会拦截请求
  },