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

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

浏览器的同源策略

  简单来说就是判断脚本是不是和自己同源，只有和自己同源的脚本才会被执行，否则浏览器就会在控制台报错并且提示拒绝访问。

同源的定义

下表展示是否与http://beijing.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吧！