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