Springboot 利用CORS 解决跨域问题

最新推荐文章于 2024-04-28 23:15:25 发布

nvd11

最新推荐文章于 2024-04-28 23:15:25 发布

阅读量718

点赞数 2

分类专栏： Java web spring 文章标签： spring boot java restful

本文链接：https://blog.csdn.net/nvd11/article/details/120806002

版权

Java 同时被 3 个专栏收录

82 篇文章 15 订阅

订阅专栏

spring

12 篇文章 0 订阅

订阅专栏

web

6 篇文章 0 订阅

订阅专栏

什么是跨域

首先我们先用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。

其实两个service 的域名都是localhost, 但是他们端口不一样，浏览器还是认为跨域了。

跨域的定义

其实，对于http://localhost:8081/getValue 这个api，直接在浏览器地址栏输入访问是没有问题的，没有跨域。
用命令行curl 去访问，也没有问题，没有跨域。
在这里插入图片描述
用postman 访问，也不会跨域。
在java/python的后台访问，也不会跨域。

跨域是浏览器的行为，因为浏览器做了限制，如果你能修改浏览器的代码，也可以取消跨域限制。

只有在浏览器的访问的html页面中，调用另1个域名或另个端口api，就会产生跨域问题。
也就是如果在同1个springboot中html调用后台的接口是没有跨域的，前后端分离就很可能会跨域。

在html中引用静态资源(js, css, img)也不会产生跨域。
只有在ajax调用api才会有跨域问题。

解决方法一， jsonp

因为静态资源不会产生跨域，那么在后台中返回一段js脚本，然后在html中静态引入，返回时再调用js里的callback函数，来欺骗浏览器。这种技术就是jsonp。 jsonp只支持get接口的跨域。

spring 在5.1中抛弃了jsonp这个古老的解决跨域方法。这里不讨论了。

解决方法二， CORS 解决跨域

这个方法是目前正统的方法，原理也很简单，上面错误信息也作了提示，只要在reponse 中加入1个header item ‘Access-Control-Allow-Origin’ ，告诉浏览器这个接口支持跨域访问，问题解决。

所以必须在api的项目修改接口。
在Controller中加入CrossOrigin(origins="*") 这个直接。

就是代表允许所有源主机跨域访问，也可以增加参数指定 get 还是 post，不写就默认全部

重新启动api项目，问题解决。
检查 Response Headers, 果然多了Access-Control-Allow-Origin 这个header
在这里插入图片描述

nvd11

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Springboot 利用CORS 解决跨域问题

什么是跨域首先我们先用springboot 建立1个简单的API，它返回1个jsonpackage 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.RequestMap
复制链接

扫一扫