Springboot 利用CORS 解决跨域问题

最新推荐文章于 2025-06-18 10:20:38 发布

原创最新推荐文章于 2025-06-18 10:20:38 发布 · 799 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #java #restful

Java 同时被 3 个专栏收录

84 篇文章

订阅专栏

spring

12 篇文章

订阅专栏

web

6 篇文章

订阅专栏

本文介绍了跨域的概念及其在浏览器中的限制，通过一个实例展示了当不同端口的SpringBoot应用间进行API调用时遇到的跨域问题。错误信息表明，由于缺少'Access-Control-Allow-Origin'头，导致浏览器的CORS策略阻止了请求。解决跨域问题的方法包括JSONP和CORS。文中详细讲解了CORS的原理，通过在Controller中添加`@CrossOrigin`注解实现允许所有来源跨域，并展示了修改后的Response Headers。最后，文章提及了JSONP作为古老解决方案的弃用。

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

什么是跨域

首先我们先用springboot 建立1个简单的API，它返回1个json

package com.example.demo_api_cors.controller;

import com.example.demo_api_cors.dto.ValueDto;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class demoController {

    @RequestMapping("/getValue")
    @ResponseBody
    public ValueDto cors1(){
        return new ValueDto(0, "new Value");
    }
}

然后启动这个springboot，端口是8081
在这里插入图片描述

可以看到，我们可以在浏览器地址栏输入 url http://localhost:8081/getValue
来访问这个api，其中localhost 就是域名， 8081就是端口

打开debug mode，可以见到Response Header的信息，如上图篮圈中。

然后我们在建立1个springboot 项目，使用8082 这个端口，尝试在项目中的某个html文件调用上面这个api

<!doctype html>
<html>
<head>
    <script src="js/angular_161/angular.min.js"></script>
</head>
    <body>
    
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1>value is {{value}}</h1>
        </div>
        
        <script>
            var app = angular.module('myApp', []);
        
            app.controller('myCtrl', function($scope, $http) {
                $scope.value ='old value'
                $http({
                    url: "http://localhost:8081/getValue",
                    method:"get",
                }).then(function (result) {//正确请求成功时处理
                    $scope.value = result.data.value;
                }).catch(function (result) { //捕捉错误处理
                    alert(result);
                });
            });
        </script>
    </body>
</html>

执行时，浏览器会显示下面的错误
Access to XMLHttpRequest at ‘http://localhost:8081/getValue’ from origin ‘http://localhost:8082’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
其实错误信息写得很清楚，
就是告诉你发生了跨域行为，从origin http://localhost:8082 访问另1个域的接口 http://localhost:8081/getValue，这个行为被CORS policy禁止了，因为respone header 没有 ‘Access-Control-Allow-Origin’ 这个item。