网络请求:
前端最底层:xhr、fetch
二次封装xhr的框架:jquery、axios
这里我使用axios:
引入axios:
npm i axios
跨域错误:违背了同源策略(协议名,主机名,端口号)
解决方案1:cors
后端配置响应头
解决方案2:jsonp
只能解决 get跨域问题,前后端都要改变
解决方案3:代理服务器
1、后端:nginx
2、前端:vue-cli
配置代理服务器参考:https://cli.vuejs.org/zh/config/#devserver-proxy
代码演示
vue配置文件:vue.config.js
const{ defineConfig} =require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,
lintOnSave:false,//关闭语法检查
// 开启代理服务器(方式一)
// devServer:{
//proxy:'http://localhost:9091'
//},
// 开启代理服务器(方式二)
devServer:{proxy:{'/proxy':{target: 'http://localhost:9091',
pathRewrite:{'^/proxy':''},
//ws: true,//用于支持websocket
//changeOrigin: true //用于控制请求中的Host值,默认为true(说不说谎)}}}})
axios请求演示:
axios.get('http://localhost:8080/proxy/home/getHome').then(
response =>{
console.log('请求成功了',response.data)},
error =>{'请求失败了',error.msg})
app组件
<template>
<div class="app">
<h1>{{msg}}</h1>
<School:getSchoolName="getSchoolName"/>
<!-- <Studentv-on:atguigu="getStudentName"/> -->
<Student ref="student"/>
<!-- vue中借助ruoter-link 标签实现路由的切换 -->
<!-- <router-link active-class="active" to='/about'>About</router-link> -->
<router-link active-class="active":to="{name:'guanyu'}">About</router-link>
<br/>
<router-link active-class="active" to="/home">Home</router-link>
<div class="router_view">
<router-view></router-view>
</div>
<button@click="getHome">获取主页信息</button>
</div>
</template>
<script>
import School from'./components/School'
import Student from'./components/Student'
import axios from'axios'
export default{name: 'App',
components:{
School,
Student},
data(){return{msg:'你好!'}},
methods:{getSchoolName(name){
console.log('app收到了schoole的数据:',name)},
getStudentName(name){
console.log('app收到了student的数据:',name)},
demo(){
console.log('demo绑定')},
getHome(){axios.get('http://localhost:8080/proxy/home/getHome').then(
response =>{
console.log('请求成功了',response.data)},
error =>{'请求失败了',error.msg})}},
mounted(){
this.$refs.student.$on('atguigu',this.getStudentName)
this.$refs.student.$on('demo',this.demo)}}</script>
<style>
.app{background-color: bisque;}.router_view{background-color: aliceblue;}
</style>
结果: