请选择 进入手机版 | 继续访问电脑版
查看: 140|回复: 2

axios解决跨域问题(Vue3.0)

[复制链接]
  • TA的每日心情
    开心
    8 小时前
  • 签到天数: 1574 天

    [LV.Master]伴坛终老

    4248

    主题

    6170

    帖子

    10万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    108846

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2019-11-8 09:52:49 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    一、什么是跨域

    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 项目初始提供的部分代码,如下图
    095718to0ome8t9eu3dqed.png



    运行截图:
    095719wf09rf9zin1n3rqe.png



    (2)step2:使用 axios
    1. 【App.vue】            TestAxios   
    2.    
    复制代码

    此时点击按钮,会出现跨域题目。
    095719eg475lf2ss2g2opo.png



    (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"}
    复制代码

    095720rgx2s4qnuzyhs33h.png


    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.    
    复制代码

    重启服务后,点击按钮,可以乐成访问。
    095720d1httzrhwhxdxd0k.png
    C#论坛 www.ibcibc.com IBC编程社区
    C#
    C#论坛
    IBC编程社区
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则