ajax跨域请求

最新推荐文章于 2024-11-06 11:06:26 发布

cuixuefeng1112

最新推荐文章于 2024-11-06 11:06:26 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

文章标签： ajax跨域请求

本文链接：https://blog.youkuaiyun.com/cuixuefeng1112/article/details/46358207

本文介绍了使用CORS解决AJAX跨域请求的方法，包括服务端配置与客户端JS设置，并对比了其他几种跨域方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个ajax跨域请求被拦截问题，对于这个有三种方案来解决：1、jsonp 2、iframe 3、cors。4、通过本域http请求跨域服务。

首先用了一下iframe，可以通过动态的添加删除iframe来解决跨域问题。

然后用了jsonp 但是我是上传文件，没有很好地解决方案。

第四种方法绝对可用，但是觉得有那么一点儿繁琐。因为每一个子站都需要添加controller。

最后是cors我觉得比较不错的。

记录一下：

1、服务端引入jar包：cors-filter-1.7.jar，java-property-utils-1.9.jar （http://pan.baidu.com/s/1hqIlKoO）

2、web.xml添加：

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowGenericHttpRequests </param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<servlet-name>filemanager</servlet-name>//这块我是直接拦截我的springmvc的servlet了。也可以配url。
</filter-mapping>

3、客户端js：

xhl=new XMLHttpRequest();

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Access-Control-Allow-Origin", '*');
xhr.setRequestHeader("Access-Control-Allow-Credentials","true");
xhr.setRequestHeader("Access-Control-Expose-Headers", "Set-Cookie");
xhr.setRequestHeader("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");
xhr.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, DELETE"); //x-xsrf-token,
if (!multipart) {
xhr.setRequestHeader("Content-Type", "application/octet-stream");
//NOTE: return mime type in xhr works on chrome 16.0.9 firefox 11.0a2
xhr.setRequestHeader("X-Mime-Type", fileOrBlob.type);
}

4、有空再琢磨琢磨jsonp。