Vue跨域解决方案

跨域：

1. 　　什么是跨域？
2. 　　　　跨 大家肯定都知道，从一边到另一边
3. 　　　　那么 域 是什么？
4. 　　　　　　通俗的说，域就是url、浏览器的请求地址的最开始的一部分
5. 　　　　　　专业一点点，域有三部分：协议+域名+端口（http+www.baidu.com+80 --> http://www.baidu.com:80）
6. 　　那么将跨和域连接起来就是从一个域到另一个域，既然都到另一个域了，那么第二个域肯定是和第一个域有所区别
7. 　　所以跨域就是个域中三部分的其中一个或多个部分不一样

在业务中进行网络请求时肯定会遇到跨域的情况，那么就会报错无法请求到数据，所以需要解决这种情况，如何解决呢？

由前端或后端分为两种方式：

1. 　　后端：在请求的接口上处理为允许跨域请求
2. 　　前端(vue)：在配置文件中添加配置参数：（配置了target后记得在请求时就不要加上 域 地址了）

　　　　　　　　　　　　

 

 编写代码试试 使用axios请求：

<template>
  <div class="hello">
    <h1>跨域解决方案</h1>
    <ul>
      <li style="background-color:aquamarine" v-for="(item,index) in msg" :key="index">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:""
    }
  },
  mounted(){
    axios.get("/api/FingerUnion/list.php").then(res=>{
        this.msg = res.data.data
        console.log(res.data)
    })
  }
}
</script>

 

查看效果：

 

成功获取到数据并且没有出现跨域的错误。