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

1. 【App.vue】            TestAxios   
2.    

复制代码

此时点击按钮，会出现跨域题目。

（3）常见错误办理

1. 【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 中写。

1. 【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 文件 修改设置（若没有，则直接在项目路径下新建即可）。

1. 【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 使用方式

1. 【App.vue】            TestAxios   
2.    

复制代码

重启服务后，点击按钮，可以乐成访问。