Vue通过axios跨域问题：Access to XMLHttpRequest at ‘http://127.0.0.1:8000/api/auction/‘ from origin ...

问题描述：

通过使用Vue向后台发生请求时，被浏览器CORS阻止：

原因分析：

浏览器跨域问题：

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

解决方案：

• 1.js通过jsonp实现绕过浏览器通过script进行跨域请求
• 2.vue中使用axios跨域

1.创建vue.config.js文件如下：

module.exports = {

    devServer: {
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8000/api/',// 后端接口
          changeOrigin: true, // 是否跨域
          pathRewrite: {
            '/api': ''
          }
        }
      }
    }
  }
}

main.js如下：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'        //关键代码
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

2.封装网络请求request.js如下：

import axios from "axios";
export function request(config) {

  const instance = axios.create({
    baseURL: '/api', // 通过/api别名指定后端路由
    timeout: 5000,
    headers:{
    },
  })

  // axios的拦截器(类似python的中间件的request)
  instance.interceptors.request.use(aaa => {

    // 多用于登录时的cookies判断
    return aaa
  }, err => {
    console.log(err);
  })
  // 数据返回拦截
  instance.interceptors.response.use(aaa => {
    // 多用于登录时的cookies判断
    return aaa.data
  }, err => {
    console.log(err);
  })
  // 直接返回
  return instance(config)

}

3.组件中axios请求数据使用：

<template>
  <div>

  </div>
</template>

<script>
  import {request} from "../../network/request"
  export default {
    name: "HomeAuction",
    created() {
      request({
        url:'/auction/'
      }).then(res=>{
        console.log(res);
      },err=>{
        console.log(err);
      })
    }
  }
</script>

<style scoped>

</style>

4.重启vue-cli

npm run serve