解决vue cli3使用axios跨域问题

目录

• 一、什么是跨域
• 1、跨域
• 2、同源策略
• 3、跨域问题怎么出现的
• 二、使用 axios 演示并解决跨域问题（vue-cli3.0）
• 1、项目创建、与 axios 的使用
• 2、跨域问题重现
• 3、解决跨域问题

【App.vue】

【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"
}

【main.js】
import Vue from "vue"
import App from "./App.vue"
// step1：引入 axios
import 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")

【vue.config.js】
module.exports = {
    devServer: {
        proxy: {
            "/api": {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                target: "https://www.baidu.com/",
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    }
}

【App.vue】