跨域:
- 什么是跨域?
- 跨 大家肯定都知道,从一边到另一边
- 那么 域 是什么?
- 通俗的说,域就是url、浏览器的请求地址的最开始的一部分
- 专业一点点,域有三部分:协议+域名+端口(http+www.baidu.com+80 --> http://www.baidu.com:80)
- 那么将跨和域连接起来就是从一个域到另一个域,既然都到另一个域了,那么第二个域肯定是和第一个域有所区别
- 所以跨域就是个域中三部分的其中一个或多个部分不一样
在业务中进行网络请求时肯定会遇到跨域的情况,那么就会报错无法请求到数据,所以需要解决这种情况,如何解决呢?
由前端或后端分为两种方式:
- 后端:在请求的接口上处理为允许跨域请求
- 前端(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