首发于学习JAVA

Vue和IDEA前后端分离项目，跨域问题的解决

跨域：请求者的url协议端口或者ip与被请求者有其中一个不同，即是跨域

https://zhuanlan.zhihu.com/p/422925154/edit

简单的说就是前端向后端取数据（vue通过npm启动会有个初始端口号 http://localhost8080）

这个时候你后端在idea,前端要取数据也要启动后端服务器是吧！但是端口号8080被占领，只能通过配置文件修改端口号，例如修改端口号为8081（例如 http://localhost8081）

这个时候前端vue请求后端的话就是8080端口向8081端口请求（也就出现跨域问题），但是由于浏览器的策略是不允许跨域的，所以数据就报错了！

解决跨域：

前端vue解决方式：

与src文件夹同级定义vue.config.js文件：注意要同级目录下

js内容：

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

解析下js代码的内容

port: 9876 表示给当前的vue项目一个动态启动地址

target: 'http://localhost:8082', //代理的目标地址，你可以修改端口号（与你idea项目的启动端口一直），使得你的vue项目与idea服务器数据跨域得到解决

'/api': '' //选择忽略拦截器里面的单词，定义是一个空的字符串，访问后端的路径就成为