前端学习笔记01——Vue解决跨域问题

前端学习日记01——Vue解决跨域问题
  跨域问题在前端可以说是很常见的，在解决这个问题之前，我们可以先了解为什么需要跨域。以下内容参考自MDN，链接：浏览器的同源策略。目前因为我只试过Vue解决跨域，所以只会Vue解决方法，还有一些内容后续会改进啦！

浏览器的同源策略

  首先，跨域问题是浏览器的同源策略导致的。同源策略是一个重要的安全策略，它用于限制一个来源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

  简单来说就是判断脚本是不是和自己同源，只有和自己同源的脚本才会被执行，否则浏览器就会在控制台报错并且提示拒绝访问。那么我们首先得了解一下什么是同源。

同源的定义

  如果两个 URL 的协议、端口(如果有指定的话)和域名都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）

下表展示是否与http://beijing.company.com/home/index.html同源的对比

被请求url	结果	原因
http://beijing.company.com/company/index.html	同源	只有路径不同
http://beijing.company.com/home/other.html	同源	只有路径不同
https://beijing.company.com/home/index.html	不同源	协议不同
http://beijing.company.com:81/home/index.html	不同源	端口不同(http://默认端口是80)
http://shanghai.company.com/home/index.html	不同源	域名（主机）不同

Vue解决跨域

  在vue中一般使用proxy代理解决跨域问题。我使用的vue cli版本是4.5.9的，新版本没有原来的config文件夹，所以我们需要在项目文件夹的根目录下新建一个叫vue.config.js的配置文件，然后在里面配置devSever.proxy，代码如下。

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 这里最好有一个 /
        target: 'http://192.168.119.193:8080', // 后台接口域名
        changeOrigin: true, // 是否允许跨域 设置为true
       // pathRewrite: {  // 重写域名也，可以不重写
       //   '^/api': '/'
       // }
      },
    }
  }
}

在配置完之后我们用新的域名来代替原来的ip和端口就行了，如下

    //  比如原来我们这样访问接口
this.$axios.get("http://192.168.119.193:8080/addUser").then (
   (response) => {
     // handle success
   }).catch((error) => {
     // handle error
   })
   
   //  现在将接口替换成这样就行了
this.$axios.get("api/addUser").then (
   (response) => {
     // handle success
   }).catch((error) => {
     // handle error
   })

总结

  在实现的过程中也遇到一些可能出现的问题，记得配置完之后一定要重启一下项目，我第一次弄的时候就因为这个原因浪费了很多时间，然后记得一定要在项目文件的根目录下创建配置文件。proxy的具体配置可以参考(github.com/chimurai/ht… 如果遇到需要代理多个接口根路径的情况只需要在proxy中继续配置就可以了