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

网络投稿 02-07 8035

问题描述：

通过使用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