前后端分离的项目中,前端为了提高开发效率往往会自己开一个小型的服务器,比如 webpack.devServer ,这样在前端调用后端接口的时候必然会面对跨域问题。
之前在做 vue+node.js 前后端分离项目的时候,遇到 axios 不支持跨域的问题,网上找了很多资料,但很少有讲 vue-cli4.x 版本的,当时看的是这位大佬的博文 指路:Vue-cli 3.x + axios 跨域方案踩坑指北 讲得很详细,我这里只做个人记录总结。
解决方法:使用 **webpack 的 devServer 的代理功能(proxy)**来实现开发环境中的跨域。
在 vue.config.js 文件中配置 devServer.proxy
PS:vue-cli4.x 中默认是没有这个文件的,可以在项目的根目录新建一个,并命名为 vue.config.js
module.exports = {
configureWebpack: {
devServer: {
proxy: {
//名字可以自定义,用于指定哪些请求需要被 target 对应的主机代理
// 当前 devServer 的地址是 localhost:8080 , 需要代理的地址是 localhost:3000
'/api': {
target: 'http://localhost:3000', //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //这里设置是否跨域
pa