提前声明:本文只针对使用vue-cli创建的vue项目,范围仅限于vue2
跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制
解决跨域
话不多说,直接上代码:
在项目根目录创建vue.config.js
文件,该文件与src
同级在vue.config.js
文件中写下以下代码:
module.exports = {devServer: {proxy: {'/api': {target: '这一块写的是后端的接口地址',pathRewrite: {'^/api': ''//重写,},changeOrigin: true//是否允许跨域}}}}
全局配置 axios 使用方法:上面代码是实现axios在vue中允许跨域
// 1. 安装axiosnpm i axios// 2. 在 main.js 中配置引入 axiosimport axios from 'axios'Vue.prototype.$axios = axios// 3. 在任意组件中使用 axios 发起请求created() {this.$axios.get('http://localhost:8080/api') // 此处路径为本项目路径.then((res) => {console.log(res.data);}).catch((err) => {console.log(err);})}
局部配置 axios 使用方法:
// 1. 安装axiosnpm i axios// 2. 在你所使用的组件中引入 axiosimport axios from 'axios'// 3. 在任意组件中使用 axios 发起请求created() {axios.get('http://localhost:8080/api') // 同上.then((res) => {console.log(res.data);}).catch((err) => {console.log(err);})}
全局带参数的请求形式以上方法都是不带参数的请求形式
this.$axios.get('http://localhost:8080/api', {// 本机运行项目的地址params: {// 此处填写请求所带参数id: 1, // 此处代表我要请求id为1的数据}}).then((res) => {console.log(res.data);}).catch((err) => {console.log(err);})
局部带参数的请求方式
axios.get('http://localhost:8080/api', {// 本机运行项目的地址params: {// 此处填写请求所带参数id: 1, // 此处代表我要请求id为1的数据}}).then((res) => {console.log(res.data);}).catch((err) => {console.log(err);})
以上便是本文的全部内容,如果对您有帮助的话,请三连,谢谢
友链
码农小胡
如果觉得《Vue解决Axios跨域问题》对你有帮助,请点赞、收藏,并留下你的观点哦!