axios解决跨域问题（Vue3.0）
一、什么是跨域1、跨域
指的是欣赏器不能实验其他网站的脚本。它是由欣赏器的同源计谋造成的，是欣赏器对javascript施加的安全限定。
2、同源计谋
是指协议，域名，端口都要雷同，此中有一个差异都会产生跨域，在哀求数据时，欣赏器会在控制台中报一个非常，提示拒绝访问。
3、跨域题目怎么出现的
开发一些前后端分离的项目，好比使用 SpringBoot + Vue 开发时，配景代码在一台服务器上启动，前台代码在别的一台电脑上启动，此时就会出现题目。
好比：
配景 地点为http://192.168.70.77:8081
前台 地点为http://192.168.70.88:8080
此时 ip 与 端标语差异等， 不符条约源计谋，造成跨域题目。
二、使用 axios 演示并办理跨域题目（Vue3.0）
1、项目创建、与 axios 的使用
（1）step1：创建 vue 项目
参考 https://www.cnblogs.com/l-y-h/p/11241503.html
（2）step2：使用 axios
参考 https://www.cnblogs.com/l-y-h/p/11656129.html
2、跨域题目重现
（1）step1：删去 vue 项目初始提供的部分代码，如下图
运行截图：
（2）step2：使用 axios
【App.vue】 TestAxios
此时点击按钮，会出现跨域题目。
（3）常见错误办理
【question1：】 'err' is defined but never used (no-unused-vars)这个题目，是由于 vue 项目安装了 ESLint 。暴力办理：直接关闭 ESLint 在package.json 文件中 添加"rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whitespace":"off", "no-debugger": "off"}
3、办理跨域题目
（1）step1：设置 baseURL
可以自界说一个 js 文件，也可以直接在 main.js 中写。
【main.js】import Vue from 'vue'import App from './App.vue'// step1：引入 axiosimport Axios from 'axios'Vue.config.productionTip = false// step2：把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送哀求,// 不必要每次都 import一下 axios了，直接使用 $axios 即可Vue.prototype.$axios = Axios// step3：使每次哀求都会带一个 /api 前缀 Axios.defaults.baseURL = '/api'new Vue({render: h => h(App),}).$mount('#app')
（2）step2：修改设置文件（修改后要重启服务）
vue 3.0 通过 vue.config.js 文件 修改设置（若没有，则直接在项目路径下新建即可）。
【vue.config.js】module.exports = { devServer: { proxy: { '/api': { // 此处的写法，目标是为了 将 /api 更换成 https://www.baidu.com/ target: 'https://www.baidu.com/', // 允许跨域 changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } }}
（3）step3：修改 axios 使用方式
【App.vue】 TestAxios
重启服务后，点击按钮，可以乐成访问。
页:
[1]