首页 > 其他分享 >Vue跨域解决方案

Vue跨域解决方案

时间:2022-11-15 16:33:58浏览次数:49  
标签:axios 跨域 解决方案 Vue res data 请求

跨域:

  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>

 

查看效果:

 

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

 

标签:axios,跨域,解决方案,Vue,res,data,请求
From: https://www.cnblogs.com/0099-ymsml/p/16892865.html

相关文章