跨域问题
来源:互联网 发布:ubuntu 镜像站 编辑:程序博客网 时间:2024/05/21 21:40
文章目录
1. 跨域问题,解决之道
2. 解决思路
3. CORS涉及的响应头
3.1. Access-Control-Allow-Origin
3.2. Access-Control-Allow-Methods
3.3. Access-Control-Allow-Credentials
3.4. Access-Control-Max-Age
3.5. Access-Control-Allow-Headers
4. 解决跨域问题
5. 存在问题
跨域问题,在日常开发过程中,是一个非常熟悉的名词。之前有和大家讨论过《跨域问题,解决之道》,根据读者的反馈,希望讲解具体的实现方案,因此,这周会分享一些具体的实现方案。
解决思路
CORS 全称为 Cross Origin Resource Sharing(跨域资源共享)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,但用户不会有感觉。因此,实现CORS通信的关键是服务端。服务端只需添加相关响应头信息,即可实现客户端发出 AJAX 跨域请求。
值得注意的是,浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。
CORS涉及的响应头
Access-Control-Allow-Origin
允许访问的客户端域名,例如:http://blog.720ui.com,若为星形标示号,则表示从任意域都能访问,即不做任何限制。值得注意的是,Access-Control-Allow-Origin 只允许两种取值,一个是星形标示号,一个是具体的域名,不支持同时配置多个域名。
Access-Control-Allow-Methods
允许访问的方法名,多个方法名用逗号分割,例如:GET,POST,PUT,DELETE,OPTIONS。
Access-Control-Allow-Credentials
是否允许请求带有验证信息,若要获取客户端域下的 cookie 时,需要将其设置为 true。
Access-Control-Max-Age
可以用于 CORS 相关配置的缓存。
Access-Control-Allow-Headers
允许服务端访问的客户端请求头,多个请求头用逗号分割,例如:Content-Type。
解决跨域问题
首先,我们需要编写一个 Filter,过滤所有的 HTTP 请求,将 CORS 响应头写入 response 对象中。
- public class CORSFilter implements Filter {
- public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
- HttpServletResponse response = (HttpServletResponse) res;
- response.setHeader("Access-Control-Allow-Origin", "*");
- response.setHeader("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, PATCH");
- response.setHeader("Access-Control-Max-Age", "3600");
- response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization, Cache-control");
- chain.doFilter(req, res);
- }
- public void init(FilterConfig filterConfig) {}
- public void destroy() {}
- }
然后,在 web.xml 中配置 CorsFilter 的过滤器。
- <filter>
- <filter-name>corsFilter</filter-name>
- <filter-class>com.lianggzone.core.filter.CorsFilter</filter-class>
- </filter>
- <filter-mapping>
- <filter-name>corsFilter</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
完成上面两个步骤,即可实现跨域功能。这样跨多个域的问题就轻松解决了。
存在问题
不幸的是,CORS不支持IE8、IE9,如果产品不再考虑兼容IE低版本的话,可以忽略,但是如果产品需要兼容目前国内还存在大量低版本的IE市场(百分之二十多),那么这个需要慎重考虑咯。
- Ajax请求缓存问题、中文乱码问题、跨域问题
- birt session 过期问题,跨域问题
- cookie跨域问题
- Cookie跨域问题
- JS跨域问题
- javascript跨域问题
- ajax跨域问题
- 跨域问题
- JS跨域问题
- JavaScript跨域问题
- weblogic跨域问题
- AJAX跨域问题
- js跨域问题
- javaScript跨域问题
- 跨域问题
- 跨域问题
- Flex跨域问题
- 跨域问题
- springmvc mongodb配置问题
- 红黑树的简单实现
- Android通过程序接听或者挂断电话
- 欢迎使用CSDN-markdown编辑器
- 线性表的顺式储存结构与实现
- 跨域问题
- NodeJs之TypeScript开发环境--VS Code
- docker的简单使用
- lua关于require和package.loaded常被忽略的故事
- Jupyter Notebook导出成pdf
- singleLine属性
- JavaScript文件获取与提交
- 文章标题fda
- iOS 动画篇----CAAnimation