springboot+vue小项目解决跨域问题

springboot+vue小项目解决跨域问题

一、问题概述

在做一个前后端分离的springboot+vue的小项目的出现了一个跨域问题

我用9090的端口运行后台程序，用8080的端口运行vue前端程序，在一个新增页面的表单里，这个表单的确认按钮我设置一个点击事件，点击确认之后就会将表单的数据以post请求发送到后端进行数据的操作，但是出现了这样的一个错误

这是因为浏览器不允许我们从8080端口访问9090端口，也就是所谓的跨域问题

---

二、解决方案

要解决这个问题，只需要在vue的目录下加上这个vue.config.js文件即可

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

注意对应的post请求的路径也要随之改变