线上问题CORS跨域问题总结

Posted 在路上的德尔菲

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了线上问题CORS跨域问题总结相关的知识,希望对你有一定的参考价值。

一、什么是「CORS」

假设有个请求从百度页面(https://www.baidu.com)获取阿里巴巴用户(https://www.alibaba.com/user)信息,会展示下面保存信息

Failed to load https://www.alibaba.com/user: No A'ccess-Control-Allow-Origin' header is present on the requested resource. Origon 'https://www.baidu.com' is therefore not allowed access. 
Cross-Origin Read Blocking(CORB) blocked cross-orign response

之所以产生错误,是因为在https://www.baidu.com请求https://www.alibaba.com/user的资源产生了跨域,违反了浏览器的同源策略。所谓同源,必须是协议、域名、端口三者一致。

alibaba服务端告诉客户端浏览器,baidu要访问我的资源,需要把同源策略放开,客户端浏览器收到消息之后放行。
服务端和客户端传递的消息是通过HTTP header字段。

二、如何解决跨域

private static void doWithResponse(HttpServletRequest request, HttpServletResponse response) 
    response.setHeader("Access-Control-Allow-Origin", "*"); //允许哪些域名访问,支持通配符
    response.setHeader("Access-Control-Allow-Credentials", "true"); //是否允许请求时发送Cookie
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");//允许哪些HTTP方法
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "access-token,Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Max-Age,authorization,Content-Type");//允许哪些HTTP头
    response.setHeader("access-token", "*");

注意response.setHeader("Access-Control-Allow-Origin", "*")表示允许所有域都可以访问,完全不符合浏览器同源策略,其他域名都可以访问应用资源,如果提供的资源存在敏感数据是不建议这么配置的
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")) 这样可以比较好解决

以上是关于线上问题CORS跨域问题总结的主要内容,如果未能解决你的问题,请参考以下文章

jsonp-反向代理-CORS解决JS跨域问题的个人总结

CORS跨域请求总结

WebApi 跨域问题解决方案:CORS

WebApi 跨域问题解决方案:CORS

理解跨域和CORS

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比