VUE项目中的跨域问题 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第18天。

一、什么是跨域?

跨域：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

跨域问题是浏览器同源策略限制。我们常见的网址一般包括协议, 域名, 端口几个部分, 在浏览器的同源策略下,协议不同，域名不同，端口不同都会出现跨域。浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略。

同源：url 是由协议、域名、端口和路径组成，如果两个路径的协议、域名、端口都相同,则表示在同一个域上

比如, 从A页面请求B页面的一些数据, 如果没有同源策略, 就不会出现跨域问题, 就可以轻松的拿到B页面的数据, 但是因为有浏览器的同源策略,在进行这样的操作时, 浏览器的是会报跨域的错误的。

二、 解决跨域问题：

vue开发中实现跨域：

在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域。

在vue中使用proxy进行跨域的原理是：

将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
再由本地的服务器去请求真正的服务器。

 module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost本地主机
   port: 8080, // 端口号
   hotOnly: false, // 热更新

   overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    
    proxy: {
      //配置跨域
      '/api': {  // 拦截以 /api 开头的接口
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端，这里true表示实现跨域
        pathRewrite: { 
          '^/api': '/'
        }
      }
    }
  }
}

三、什么是代理

字面意思就是类似中间商，开启代理，原理就是在本地创建一个虚拟服务器，发送请求数据，同时接受请求的数据，利用服务器与服务器间，交互，不会有跨域问题，也是完全只靠前端自己独立解决跨域的方式。