什么是跨域
首先我们先用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;@RestControllerpublic class demoController {@RequestMapping("/getValue")@ResponseBodypublic 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
如果觉得《Springboot 利用CORS 解决跨域问题》对你有帮助,请点赞、收藏,并留下你的观点哦!