Vue解决跨域问题

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/company/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的配置文件，然后在里面配置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
   })

总结

  在实现的过程中也遇到一些可能出现的问题，记得配置完之后一定要重启一下项目，我第一次弄的时候就因为这个原因浪费了很多时间，然后记得一定要在项目文件的根目录下创建配置文件。另外遇到的一些奇怪的问题：比如我在写接口的时候如果我写的是api/addUser我在index组件下也是可以正常访问的，但是如果在index的一个子路由组件中访问的话就会失效，但是加上前面的"/"就没问题，因此，建议大家还是写成/api/addUser吧！