前段跨域请求springboot application后台解决

Life is short , play more!
本文来自lihao's Blog,转载请注明。

当前端程序(js)跨域请求restful api 或者 资源时, 会先进行options请求,查看是否有权限。 如果有权限则会继续请求并获得服务器资源。
例如开发的vue spa, npm run dev后, 程序默认部署到了localhost(本地) 8080 端口下。 这时候我们调试前端程序访问一个其他的服务器资源,例如http://otherip/api, 因为otherip 不是localhost:8080 则浏览器会先进行一个options 方法的请求。

服务器如果允许该从域名下(localhost:8080) 访问本服务的话, 则会返回

HTTP/1.1 200 OK
Allow: OPTIONS, GET, HEAD, POST
Cache-Control: max-age=604800
Date: Thu, 13 Oct 2016 11:45:00 GMT
Expires: Thu, 20 Oct 2016 11:45:00 GMT
Server: EOS (lax004/2813)
x-ec-custom-error: 1
Content-Length: 0

 

如果服务器不允许跨域访问,则会返回403错误(invalud request cors),此时浏览器便不会继续请求服务器资源。

HTTP/1.1 403 OK

 

此时我们需要对spring boot application的controller 上加上如下注解,并重新部署后。 这样后台的服务便可以允许origin 从 http://localhost:8080 访问 http://otherip/api 。

 

@CrossOrigin(origins = "http://localhost:8080")

https://spring.io/guides/gs/rest-service-cors/ 具体spring boot application 解决cros 问题的具体教程,见spring 官方指导

备注: 通常我们生产环境里部署, 会将前端spa 程序部署在nginx 上,  访问后端的资源(接口)等, 通过nginx转发。 这样就不会存在跨域的问题了。


发表评论

电子邮件地址不会被公开。 必填项已用*标注