前言
记录VUE+Springboot项目请求跨域操作要点,在学习过程中不断补充。
一、跨域问题产生
1、当前网页URl与请求的URL地址不同域名。
2、当前网页URl与请求的URL相同域名,不同端口。
3、当前网页URl与请求的URL不同协议。
即域名、端口和协议必须一样,不然就属于跨域请求
具体内部技术原因待学习,看了一些仍旧不太了解。
跨域 + devServer.proxy
二、傻瓜式解决
1.前端操作
使用代理服务器
(1)vue.config.js
在项目根目录下(与src文件夹同级)创建vue.config.js文件来修改默认的配置:
module.exports = {
devServer: {
proxy: {
//名字可以自定义,这里我用的是api
'/api': {
target: 'http://127.0.0.1/',//设置你调用的接口域名和端口号(目标IP:端口)
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
(2)main.js
axios.defaults.baseURL = '/api'; //调用axios时前端加上默认路由/api
(3)调用示例
this.axios.post('/php/select.php').then((response) => {
}).catch((err) => {
})
2.后端设置
springboot解决CORS 跨域问题,options请求出现403
请求是跨域,所以会先发一个options看看支不支持跨域,如果服务器支持跨域才会发原来的请求。
将后端的Controller类上加一个注解
@CrossOrigin(origins = "http://127.0.0.1:8080")
//origins ="允许跨域访问的协议+ip+端口"
//如果想设置所有地址都可以跨域设置成origins ="*"
中间有个细节就是本地测试的时候前端网址如果ip是localhost的话,后端注解origins的值必须是“localhost”。
疑问:为什么我之前只是后端设置跨域,前端修改请求头,并没有使用代理服务器也可以正常使用?详情代码为之前的vue
D:\Program\WebStormProjects\VueDemo(request+header)