AngularJS通过CORS实现跨域访问

最新推荐文章于 2025-04-18 16:11:32 发布

「已注销」

最新推荐文章于 2025-04-18 16:11:32 发布

阅读量764

点赞数

分类专栏： web 文章标签： spring ajax mvc tomcat AngularJS

本文链接：https://blog.youkuaiyun.com/iteye_3793/article/details/82649013

版权

web 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何解决跨域访问问题，特别是针对AngularJS应用。通过在Spring MVC服务端添加CORS过滤器，设置相应HTTP头，允许跨域请求。在AngularJS端，使用$http服务进行GET请求时，指定Content-Type。详细步骤包括创建过滤器类、配置web.xml以及AngularJS的请求代码示例。

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

什么是跨域请求
可以理解为两个域名间交互数据的请求；
而现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，于是乎就有跨域访问的问题。

一般错误表现：
XMLHttpRequest cannot load XXXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'XXXX' is therefore not allowed access.

解决方法：
在 response 中添加 header
("Access-Control-Allow-Origin", "*");
("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
("Access-Control-Max-Age", String.valueof(3600*2));
("Access-Control-Allow-Headers", "x-requested-with");

添加方式很多，下面给出我的添加方式：
一、环境是：spring mvc 4.0, tomcat 7.0
二、服务端配置
2.1、定义类,
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class MyCORSFilter 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", "POST, GET");// 允许跨域访问的类型
response.setHeader("Access-Control-Max-Age", String.valueof(3600*2));
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}

2.2、在 web.xml 中添加过滤器
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.xxx.MyCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern> // 配置你的需要跨域的 url 过滤
</filter-mapping>

三、AngularJS 端访问代码
注：因为用到了JSON.stringify 函数，所以需要引入 json2.js
$http(
{method: "get",
url: url + "?“ + params,
headers:{"Content-Type":"application/x-www-form-urlencoded"}
}
).then(function(response) {
console.log("[status:" + response.status + "; data:" + JSON.stringify(response) + "]");
}, function(response) {
var data = response;
console.log("[status:" + response.status + "; data:" + JSON.stringify(data) + "]");
});

--------------------------------------------------------------------
若有其他凝问或文中有错误，请及时向我指出，
我好及时改正，同时也让我们一起进步。
email ： binary_space@126.com
qq ： 1035862795
敲门砖：代码谱写人生