解决项目中出现的跨域问题

在此之前，引用以下链接，完善一下跨域的概念以及同源策略的概念

为什么会出现跨域？

只要协议、域名、端口有一个不同，那就是跨域。
当下，最流行的就是前后端分离开发项目，就是前端项目和后端接口并不在一个域名之下，
那么前端项目开发时，去访问后端接口就会存在跨域行为。
注意我们所遇到的这种跨域是位于开发环境（webpack代理服务器），真正部署上线时的跨域是生产环境（nginx服务器，或者后台配cors）

解决开发环境的跨域问题

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务，可以通过这个服务帮我们代理请求，解决跨域问题。
这就是vue-cli配置webpack的反向代理
vue-cli的配置文件即vue.config.js，这里有我们需要的代理选项

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        '/api': {
          target: 'www.baidu.com', // 我们要代理请求的地址
           // 路径重写
          pathRewrite: {
              // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
              '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
          }
      },
    }
  }
}

路径重写需要注意，根据后端地址来考虑是否要重写。同时我们还要注意注释掉或者删除mock的加载，因为mock-server会导致代理服务器的异常
vue.config.js的改动如果要生效，需要进行重启服务

// before: require('./mock/mock-server.js'),  // 注释mock-server加载

修改我们的请求地址，走代理

this.request({
    method: 'post',
    url: '/api/sys/login',
    data: this.loginForm
}).then(res => {
    console.log(res)
})

最终效果：

生产环境的跨域

当生产环境表示我们已经开发完项目，将项目部署到了服务器上，这时已经没有了vue-cli脚手架的辅助了，我们只是把打包好的html+js+css交付给运维人员，放到服务器上，如果此时还是跨域，一般可以借助Nginx进行代理，或者后台开启cors。
Nginx的反向代理

至于其他的解决跨域的方法，还是建议看这篇文章

juejin.cn/post/684490…

遇到的一个特殊的问题，关于防盗链的问题

在做项目过程中，引用了网络资源的一个视频链接，但是直接给到video标签上的src是播放不出来的，就是在其他任何页面，点击这个链接都可以看，甚至新建一个html文件里，放一个video标签给个地址也可以看，但是在vue脚手架创建的项目里是播放不了的。
然后找到的一个简单的解决办法就是在pubilc文件里的最后导出的index.html的头部加上

 <meta name="referrer" content="no-referrer" />

referrer是一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。

05-解决跨域问题