module.exports = {
configureWebpack: {
devServer: {
proxy: {
//名字可以自定义,这里我用的是api
'/api': {
target: 'http://localhost:1993',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,//这里设置是否跨域
pathRewrite: {
'^/api': ''
}
}
}
}
},
}
在vue-config.js配置devserver.proxy代理,即可跨域请求
使用时 url地址直接用命名的/api
!!!!!!!有一个巨坑,vue.config.js修改后需要重启npm run serve
vue项目上线后需要配置nginx去代理
server { listen 80; server_name 域名; root ####; location / { try_files $uri $uri/ /index.html; //解决 HTML5 History 模式直接访问子路由404问题 } location /api/ { proxy_pass 域名或者ip地址:端口/; //匹配api开头的请求 端口后面加 / 请求的时候会把api去掉 不加 / 会带上完整的访问接口地址,这个可以和后端约定 } }