请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

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

[复制链接]
查看2940 | 回复3 | 2019-11-8 09:52:49 | 显示全部楼层 |阅读模式
一、什么是跨域

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编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则