问题描述:
通过使用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