axios跨域如何解决

开心笑...

已于 2022-11-16 09:49:57 修改

阅读量730

点赞数 1

文章标签：前端服务器 javascript vue.js

于 2022-11-16 08:39:27 首次发布

本文链接：https://blog.csdn.net/m0_62226095/article/details/127877429

版权

Vue.js 跨域 axios 代理 vue.config.js

关键词由CSDN通过智能技术生成

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

第一步：配置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
      })
    },