vue+axios实现跨域反向代理

最新推荐文章于 2024-09-29 17:29:37 发布

chalkbox

最新推荐文章于 2024-09-29 17:29:37 发布

阅读量38

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/chalkbox/article/details/132994364

版权

关于跨域反向代理的研究，更改main.js和新建vue.config.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import './plugins/element.js'
 5 // 全局样式表
 6 import './assets/css/global.css'
 7 
 8 import axios from 'axios'
 9 Vue.prototype.$http = axios  // axios的原型更改
10 axios.defaults.baseURL = '/api'  // 反向代理URL
11 
12 Vue.config.productionTip = false
13 
14 new Vue({
15   router,
16   render: h => h(App)
17 }).$mount('#app')

main.js

vue.config.js //必须放在根目录下

 1 module.exports = {
 2     devServer: {
 3         open: true,  //设置自动打开
 4         port: 8080,  // 这个是默认端口
 5         proxy: {
 6             '/api': {
 7                 target: 'http://localhost:80',  //设置反向代理链接
 8                 changeOrigin: true,  //  是否跨域
 9                 pathRewrite: {
10                     '^/api': ''  //  重定向
11                 }
12             }
13         }
14     }
15 }