javascript
Springboot 利用CORS 解决跨域问题
什么是跨域
首先我們先用springboot 建立1個(gè)簡(jiǎn)單的API， 它返回1個(gè)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")@ResponseBodypublic ValueDto cors1(){return new ValueDto(0, "new Value");} }然后啟動(dòng)這個(gè)springboot， 端口是8081
可以看到， 我們可以在瀏覽器地址欄輸入 url http://localhost:8081/getValue
來(lái)訪問(wèn)這個(gè)api， 其中l(wèi)ocalhost 就是域名， 8081就是端口
打開debug mode， 可以見到Response Header的信息， 如上圖籃圈中。
然后我們?cè)诮?個(gè)springboot 項(xiàng)目， 使用8082 這個(gè)端口， 嘗試在項(xiàng)目中的某個(gè)html文件調(diào)用上面這個(gè)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) {//正確請(qǐng)求成功時(shí)處理$scope.value = result.data.value;}).catch(function (result) { //捕捉錯(cuò)誤處理alert(result);});});</script></body> </html>執(zhí)行時(shí)， 瀏覽器會(huì)顯示下面的錯(cuò)誤
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.
其實(shí)錯(cuò)誤信息寫得很清楚，
就是告訴你發(fā)生了跨域行為， 從origin http://localhost:8082 訪問(wèn)另1個(gè)域的接口 http://localhost:8081/getValue， 這個(gè)行為被CORS policy禁止了， 因?yàn)閞espone header 沒(méi)有 ‘Access-Control-Allow-Origin’ 這個(gè)item。
其實(shí)兩個(gè)service 的域名都是localhost, 但是他們端口不一樣， 瀏覽器還是認(rèn)為跨域了。
跨域的定義
其實(shí)， 對(duì)于http://localhost:8081/getValue 這個(gè)api， 直接在瀏覽器地址欄輸入訪問(wèn)是沒(méi)有問(wèn)題的，沒(méi)有跨域。
用命令行curl 去訪問(wèn)， 也沒(méi)有問(wèn)題， 沒(méi)有跨域。
用postman 訪問(wèn)， 也不會(huì)跨域。
在java/python的后臺(tái)訪問(wèn)， 也不會(huì)跨域。
跨域是瀏覽器的行為，因?yàn)闉g覽器做了限制，如果你能修改瀏覽器的代碼， 也可以取消跨域限制。
只有在瀏覽器的訪問(wèn)的html頁(yè)面中， 調(diào)用另1個(gè)域名或另個(gè)端口api， 就會(huì)產(chǎn)生跨域問(wèn)題。
也就是如果在同1個(gè)springboot中html調(diào)用后臺(tái)的接口是沒(méi)有跨域的， 前后端分離就很可能會(huì)跨域。
在html中引用靜態(tài)資源(js, css, img)也不會(huì)產(chǎn)生跨域。
只有在ajax調(diào)用api才會(huì)有跨域問(wèn)題。
解決方法一， jsonp
因?yàn)殪o態(tài)資源不會(huì)產(chǎn)生跨域， 那么在后臺(tái)中返回一段js腳本， 然后在html中靜態(tài)引入，返回時(shí)再調(diào)用js里的callback函數(shù)，來(lái)欺騙瀏覽器。 這種技術(shù)就是jsonp。 jsonp只支持get接口的跨域。
spring 在5.1中拋棄了jsonp這個(gè)古老的解決跨域方法。 這里不討論了。
解決方法二， CORS 解決跨域
這個(gè)方法是目前正統(tǒng)的方法， 原理也很簡(jiǎn)單， 上面錯(cuò)誤信息也作了提示， 只要在reponse 中加入1個(gè)header item ‘Access-Control-Allow-Origin’ ， 告訴瀏覽器這個(gè)接口支持跨域訪問(wèn)， 問(wèn)題解決。
所以必須在api的項(xiàng)目修改接口。
在Controller中加入CrossOrigin(origins="*") 這個(gè)直接。
- 就是代表允許所有源主機(jī)跨域訪問(wèn)， 也可以增加參數(shù)指定 get 還是 post， 不寫就默認(rèn)全部
重新啟動(dòng)api項(xiàng)目， 問(wèn)題解決。
檢查 Response Headers, 果然多了Access-Control-Allow-Origin 這個(gè)header
總結(jié)
以上是生活随笔為你收集整理的Springboot 利用CORS 解决跨域问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 笔记 - AliCloud 云上安全防护
- 下一篇： JSON定义及解析，JSON文件读写