Vue3使用axios请求springboot时遇到跨域错误解决办法
vue使用axios遇到跨域请求问题的解决方法
·
问题再现:
vue请求代码
<script>
const app = Vue.createApp({
data() {
return {
msg: ''
}
},
mounted() {
axios.get('http://127.0.0.1:8080/test').then((Response)=>{
console.log(Response.data);
this.msg = Response.data;
})
}
}).mount("#dataTest");
</script>
启动Vue项目,测试请求:
典型的跨域请求错误,文章末尾有介绍什么是跨域请求错误
解决方法
打开vue.config.js
加上以下代码:
//vue使用axios遇到跨域访问错误的解决办法
module.exports = {
devServer:{
proxy:{
'/test':{ //axios请求的别名
// 跨域的服务器地址
target: 'http://127.0.0.1:8080/test', //真实请求的地址
// 是否允许跨域
changeOrigin: true,
// 替换掉请求路径的/sougou为“”
pathRewrite:{'^/test': ""}
},
}
}
}
原来代码的请求地址就改为/test
<script>
const app = Vue.createApp({
data() {
return {
msg: ''
}
},
mounted() {
axios.get('/test').then((Response)=>{
console.log(Response.data);
this.msg = Response.data;
})
}
}).mount("#dataTest");
</script>
修改vue.config.js文件后要重启项目
方法测试:
测试成功,解决跨域请求问题
只需编写一个配置类即可
SpringBoot后端解决跨域
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 解决跨域问题
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
//.allowedOriginPatterns("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
跨域请求介绍
- 什么是跨域?
跨域的出现是由于:同源策略(Sameoriginpolicy),它是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。 - 什么时候会出现跨域
只要请求的:域名、端口、协议,任意一个不同时都会出现跨域请求问题 - 解决方法
见上面
更多推荐
已为社区贡献2条内容
所有评论(0)