概述
什么是跨域?
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
第一步:配置baseURL 在main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.prototype.axios = axios;
Vue.config.productionTip = false
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
第二步:在vue.config.js中
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
devServer: {
proxy: {
'/api': {
// http://localhost:8081/api/banner
target: 'http://127.0.0.1:7001',
// 要请求的数据接口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
})
第三步:在要用的组件中
created(){
this.axios({
url:"/api/seller"
// /api = http://127.0.0.1:7001 /seller 要拿到的数据
}).then((res)=>{
console.log(res) // 打印看一下数据是否拿到
this.arr = res.data; // 把数据赋值给空数组 arr
})
},
最后
以上就是痴情发带为你收集整理的axios跨域如何解决的全部内容,希望文章能够帮你解决axios跨域如何解决所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复