什么是跨域
首先我们先用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 解决跨域问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
