Vue解决Axios跨域问题

提前声明：本文只针对使用vue-cli创建的vue项目，范围仅限于vue2

跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制

解决跨域

话不多说，直接上代码：

在项目根目录创建vue.config.js文件，该文件与src同级在vue.config.js文件中写下以下代码：

module.exports = {devServer: {proxy: {'/api': {target: '这一块写的是后端的接口地址',pathRewrite: {'^/api': ''//重写,},changeOrigin: true//是否允许跨域}}}}

上面代码是实现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跨域问题》对你有帮助，请点赞、收藏，并留下你的观点哦！