springboot + Vue跨域问题_spring boot vue 中的连接数据库是远端地址还有127.0.0.1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42162388/article/details/123071338

本文探讨了浏览器的同源策略导致的跨域问题及其在前后端分离开发中常见的情况，如域名、端口和协议不同。介绍了解决跨域的JSONP和CORS方法，重点讲解了通过CORS在SpringBoot中配置跨域的方法，包括创建CrosConfig工具类，并展示了Vue.js前端与后端交互的简单示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是跨域

跨域指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.目前所有的浏览器都实行同源策略,所谓的同源指的是
协议相同
域名相同
端口相同

二、跨域问题啥时候发生

1、前后端分离开发时域名不同
2、前后端分离开发时域名相同端口不同
例如：
是否跨域判定如下：
http://www.123.com/index.html 调用 http://www.123.com/server.php(非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php(主域名不同:123/456,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php(端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php(协议不同:http/https,跨域)
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域.
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行.

三、解决方法

常见的解决方案有JSONP和CORS等多种方式,这里我们采用了CORS的方式来统一处理项目中的跨域问题.
创建一个工具类CrosConfig继承WebMvcConfigurer并重写addCorsMappings。具体代码如下：

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

控制层要往前端传的数据这里随便写个简单的，传个数字：

@RequestMapping("/getIndex")
@ResponseBody
public int getIndex() throws IOException, InterruptedException {
    return 2;
}

vue前端与后端通信代码：

 axios.get('http://localhost:7777/getIndex').then(function (resp) {
		alert(resp.data)
        });

resp.data即为后端传递的数据。
是不是很简单