`
征客丶
  • 浏览: 133482 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

AngularJS通过CORS实现跨域访问

    博客分类:
  • web
阅读更多
什么是跨域请求
可以理解为两个域名间交互数据的请求;
而现代浏览器默认都会基于安全原因而阻止跨域的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
敲门砖: 代码谱写人生















分享到:
评论

相关推荐

    详解AngularJS如何实现跨域请求

    服务器端需要设置`Access-Control-Allow-Origin`头,允许特定或所有域名进行跨域访问。例如: ```java response.setHeader("Access-Control-Allow-Origin", "*"); // 或者指定特定域名 response.setHeader(...

    AngularJS实现的JSONP跨域访问数据传输功能详解

    JSONP (JSON with Padding) 是一种跨域数据交互协议,它允许JavaScript从不同的域名获取数据,从而...然而,随着现代浏览器对CORS的支持,JSONP的使用正在逐渐减少,CORS提供了更安全且功能更强大的跨域数据访问方式。

    cors解决跨域web实例源码(结合网上改造)

    标题 "cors解决跨域web实例源码(结合网上改造)" 涉及的核心知识点是CORS(Cross-Origin Resource Sharing,跨源资源共享),这是一种机制,允许浏览器在执行JavaScript时访问不同源(即不同协议、域名或端口)的...

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程

    随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细。...所以,今天我们这篇文章的主题就是讨论演示如何配置Web Api以让其支持跨域访问(Cors)。好了,下面我们以一个简单的示例直

    AngularJs解决跨域问题案例详解(简单方法)

    跨域请求(Cross-Origin Resource Sharing,CORS)是指由于浏览器的同源策略(Same-Origin Policy),当一个域下的网页尝试访问另一个域的资源时,浏览器会限制该跨域HTTP请求。这种限制可以防止恶意用户利用脚本...

    关于Angularjs中跨域设置白名单问题

    总结一下,解决AngularJS中的跨域问题,主要是通过设置$sceDelegateProvider的白名单来允许特定源的请求,并使用JSONP或者CORS来实现跨域通信。JSONP适用于只支持GET请求的后端服务,而CORS则更全面,支持多种HTTP...

    ASP.NETWebApi跨域请求

    总之,ASP.NET Web API的跨域请求配置涉及到CORS中间件的使用,可以通过全局配置或控制器级别的配置来实现。正确配置后,前端应用便能安全地从不同源与Web API进行交互。在实际应用中,务必注意安全性和性能,根据...

    浅谈angular.js跨域post解决方案

    为了解决这个问题,AngularJS提供了一些方法来实现跨域请求。 首先,AngularJS的$http服务是基于原生的XMLHttpRequest对象构建的,用于读取远程服务器的数据。它提供了$http.get()和$http.post()等方法来发起GET和...

    AngularJS中的JSONP实例解析

    在当今Web开发中,跨域资源共享是一个不可忽视的问题,尤其是前端...正确理解JSON与JSONP的区别,掌握其在AngularJS中的实现方式,并注意其潜在风险,将有助于开发人员更好地运用这一技术,实现Web应用中的跨域通信。

    解析AngularJS中get请求URL出现的跨域问题

    问题在于,这个请求是通过JSONP(JSON with Padding)而非传统的CORS(Cross-Origin Resource Sharing,跨域资源共享)方式进行的。JSONP是一种解决跨域问题的古老技术,它通过动态插入`&lt;script&gt;`标签来实现,而`$...

    基于HTML5、Angularjs、Ajax创建的一个用于测试restful api的页面,有点类似postman的功能.zip

    5. **跨域请求**:CORS(Cross-Origin Resource Sharing)机制,允许Ajax请求突破同源策略的限制。 【Apitest-master项目】 此项目名为Apitest-master,可能包含以下文件结构: - `index.html`:主入口页面,使用...

    XXX02_项目话术.txt

    - 在响应头设置 `Access-Control-Allow-Origin` 属性,可以指定允许跨域访问的域名,也可以使用通配符 * 表示允许任何来源的请求。 - 设置 `Access-Control-Allow-Credentials` 属性为 true,表示服务器响应允许...

    spring-security-ng-cors:使用 spring-security-csrf-token-interceptor 演示 CORS 问题的示例

    在这个名为 "spring-security-ng-cors" 的项目中,我们将探讨如何使用 `spring-security-csrf-token-interceptor` 解决CORS问题,以便在前后端分离的应用架构中实现跨域安全访问。 CORS 是一种允许服务器放宽同源...

    FireTree-ngWordPress:用于从 WP REST API 检索数据的 AngularJS 工厂

    - 跨域资源共享(CORS):在使用 REST API 时,可能涉及跨域请求,需要服务器支持 CORS 设置。 - 数据处理:获取数据后,开发者通常需要对数据进行处理,如分页、过滤、排序等,以适应前端展示需求。 - 安全性:在与...

    MyIonicApp

    这个项目的主要目标是演示如何在离子应用中实现对外部网络的访问,以及如何获取并处理JSON数据。 【描述】中提到的几个关键知识点包括: 1. **AngularJS**:AngularJS是一个流行的前端JavaScript框架,由Google...

    discovery-framework-spring-simple-project:使用Spring Framework 4.0和AngularJS的简单项目

    1. 跨域请求:由于前端和后端可能运行在不同的域名下,需要配置CORS(跨源资源共享)以允许前端访问后端API。 2. 数据验证:Spring提供了注解式验证,可以配合AngularJS的表单验证提高用户体验。 3. 安全性:使用...

    angularjs-on-asp.net-mvc

    ASP.NET MVC允许通过设置CORS策略来允许特定的源进行访问。 5. **数据绑定和AJAX**:AngularJS的双向数据绑定使得前端和后端之间的通信变得简单。通过$http服务,我们可以轻松地发送AJAX请求,获取Web API返回的...

    angularJS1 url中携带参数的获取方法

    最后,在实际开发中,还需要注意的是浏览器的安全策略可能会阻止通过JavaScript获取某些跨域请求的URL参数,这是出于安全考虑而设置的同源策略。如果遇到这种情况,可能需要在服务器端设置适当的CORS(跨源资源共享...

    权限控制,js控制js控制js控制权限控制

    开发者可以利用CORS(Cross-Origin Resource Sharing)来控制哪些源可以发起请求,实现跨域权限控制。 3. **本地存储权限**:localStorage和sessionStorage允许JavaScript在用户的浏览器中存储数据。然而,对于这些...

Global site tag (gtag.js) - Google Analytics