网络请求会产生跨域,不是每一个网络请求的地址或者说每个接口地址都一定能拿到数据。
JS跨域:
JS采取的是同源策略,同源策略是浏览器的一项安全策略,浏览器只允许js代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略。也就是说,当协议,域名,端口任意一个不相同时,都会产生跨域问题。
跨域错误提示信息:
跨域解决方案:
①后台解决:cors
②前台解决:proxy
解决过程:
1、网络请求安装:cnpm install --save axios
2、启动服务:npm run serve
3、打开components中的HelloWorld.vue,输入:
<template>
<div class="hello">
<h3>跨域解决方案</h3>
</div>
</template>
<script>
import axios from "axios"
export default{
name:'HelloWorld',
mounted(){
axios.get("http://iwenki.com/api/FingerUnion/list.php")
.then(res =>{
console.log(res.data);
})
}
}
</script>
此时产生跨域错误在控制台。
4、打开vue.config.js文件:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies:true,
devServer:{
porxy:{
'/api':{
//协议:http,端口没写默认80,域名:iwenwiki.com
target:'http://iwenwiki.com/',
changeOrigin:true
}
}
}
})
把HelloWorld.vue文件中前面地址删掉:
axios.get("http://iwenki.com/api/FingerUnion/list.php")
变成:
axios.get("/api/FingerUnion/list.php")
此时我们就解决了跨域问题。
注意:解决完跨域配置之后,要记得重启服务器才行。也就是在终端Ctrl+C退出运行状态,重新启动:npm run serve