什么是跨域请求问题?
这个问题的起因在于现代浏览器默认都会基于安全原因而阻止跨域的ajax请求,这是现代浏览器中必备的功能,但是往往给开发带来不便。
但跨域的需求却一直都在,为了跨域,勤劳勇敢的程序猿们想出了许许多多的方法,例如,jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本,而且应用场景也有许多限制,例如jsonP并非XHR,所以jsonP只能使用GET传递参数。
在移动应用风生水起的如今,托HTML5的福,Mobile Web,甚至Hybird App也逐渐火起来,在本地文件系统的Web页面,也有需要获取外部数据的需求,而这些需求也必然是跨域的。同时,HTML5也来带了叫“Cross-Origin Resource Sharing”的新特性,来赋予开发者权力决定资源是否允许被跨域访问。
如何解决?
CORS,CrossOrigin Resources Sharing,也即跨源资源共享,是 HTML5 的一项特性,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告知客户端跨域的限制,如果浏览器支持CORS的话,如果判断Origin通过的话,就会允许XHR进行请求,而不需要再使用jsonP或者代理文件。
使用这个Header返回被允许请求跨域请求的来源域,例如网站duelist.cn设置了下面的Header
Access-Control-Allow-Origin: http://smdcn.net
这样设置之后,通过http://smdcn.net下的页面对于duelist.cn进行ajax请求就会被允许,而其他网站对duelist.cn依旧会被阻拦,通过这种方式网站拥有者可以自己对此进行限制。
当然,如果不想限制来源,可以通过
Access-Control-Allow-Origin: *
来允许任何站点对该资源进行跨域请求
在SpringMVC下的解决方案:
定义SimpleCORSFilter
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;
import org.springframework.stereotype.Component;
@Component
public class SimpleCORSFilter 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-Origin", request.getHeader("Origin"));//
cookie共享用这个配置
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
response.setHeader("Access-Control-Allow-Credentials", "true");//cookie 共享
response.setHeader("XDomainRequestAllowed","1");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
web.xml:
<filter>
<filter-name>cors</filter-name>
<filter-class>com.app.filter.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
angularjs端代码:
$http({
method: "post",
url: "http://localhost:8080/eifs/usr/login.json",
data: {para1:"para1",para2:"para2"},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function (data) {
}).error(function (data) {
});
$http.get('http://localhost:8080/eifs/usr/login.json', {params:{para1:"para1",para2:"para2"},timeout: 10000})
.success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
/
/cookie 共享时 配置 withCredentials :true
$http.get("http://127.0.0.1:8080/xxx/syslogin/login?account=%E5%B0%8F%E7%81%B0&password=123456",{
withCredentials: true});
分享到:
相关推荐
CORS通过在服务器端设置特定的HTTP响应头来允许跨域请求。例如,`Access-Control-Allow-Origin`头可以指定哪些源可以访问资源,`Access-Control-Allow-Methods`定义了允许的HTTP方法,如GET、POST等,而`Access-...
**SpringBoot + Ajax + CORS 前后端分离:跨域资源共享详解** 在现代Web开发中,前后端分离已经成为一种常见的架构模式。SpringBoot作为Java领域的一个轻量级框架,常用于构建后端服务,而Ajax则在前端用于实现异步...
Java服务器端提供一个带有动态参数的JavaScript函数调用,如`callback=?`,客户端通过设置这个参数值来指定回调函数,服务器返回时将数据包裹在这个回调函数中。 2. CORS(Cross-Origin Resource Sharing) CORS是...
这个项目的重点是展示如何通过Java技术实现客户端(前端)与服务器端(后端)的数据通信,以便获取并展示实时天气信息。下面我们将深入探讨相关知识点: 1. **Java后端开发**:在该项目中,Java被用作后端开发语言...
而后端则是服务器端运行的程序,负责数据处理、业务逻辑和数据库操作。前端与后端通过API(应用程序编程接口)进行通信,例如RESTful API,前端发送HTTP请求到后端服务器,获取或提交数据。 跨域请求是由于浏览器的...
CorsFilter用于配置CORS(Cross-Origin Resource Sharing,跨源资源共享)策略,允许指定的域、协议和端口进行跨域访问,以实现前后端分离的架构。 4. **BaseDao.java**:基础DAO(Data Access Object)接口。DAO...
为了解决这个问题,Java后端可以设置CORS(跨源资源共享)头,允许特定的源进行跨域访问。 2. **JSON数据交换**:前后端数据交换通常采用JSON格式,Java有Gson库将对象转换成JSON,而JS有JSON.stringify()方法。...
在前后端分离的架构中,当我们需要将 Spring Boot 以 RESTful 接口的方式对外提供服务时,跨域问题就会出现。那么,如何来解决跨域的问题呢?下面我们将介绍三种解决方案。 解决方案一:使用 @CrossOrigin 注解 在...
6. **JSONP(JSON with Padding)** 和 **CORS(Cross-Origin Resource Sharing)**:这两个机制允许JavaScript跨域访问Java服务,是前后端数据交换的常见手段。 7. **Web Services**:包括RESTful API和SOAP等,...
Java服务器可以通过多种方式实现这一功能,包括使用Java Servlets或更现代的WebSocket技术。WebSocket提供了低延迟、高效率的全双工通信,非常适合实时应用。 综上所述,AJAX为Java开发者带来了构建更丰富、更互动...
前后端分离是现代Web开发的重要模式,它将应用分为两个主要部分:前端(客户端)负责用户交互,后端(服务器端)处理业务逻辑和数据存储。在本项目中,前端可能使用React、Vue或Angular等现代JavaScript框架,而后端...
这通常涉及服务器端的响应头设置,允许特定的源访问其资源。 9. **前端文件处理** 在用户选择文件后,前端可能需要先对文件进行预处理,如读取文件内容、生成缩略图,以减少服务器压力和提高用户体验。 10. **...
2. CORS跨域支持:Springboot设置CORS策略,允许Vue应用从不同源发起请求,解决跨域问题。 3. JWT令牌验证:通过JWT实现前后端的用户认证,前端在每次请求时携带令牌,后端验证其合法性。 四、数据库设计与SQL文件 ...
这通常涉及到API接口的设计,JSON格式的数据交换,以及服务器端的安全策略设置。 【相关知识点】 1. **跨源资源共享(CORS)**:CORS是一种机制,它使用额外的HTTP头部让浏览器和服务器进行沟通,允许浏览器向非...
需要注意的是,由于跨域限制,可能需要在服务器端配置CORS策略。 **6. 账户密码拦截器** 在CXF中,可以编写拦截器来实现特定的功能,如认证、授权等。在本例中,提到了"账户密码拦截器",这可能是一个自定义的...
开发者可能使用了JAX-RS注解(如`@Path`、`@GET`、`@POST`等)来定义RESTful接口,并通过CXF的配置开启CORS支持。 总之,“cxf-webservice-rest”项目为学习和理解如何使用CXF创建RESTful Web服务,以及如何实现...
同样,后端开发者可以自由选择服务器端技术,如Node.js、Java或Python,只要提供符合约定的API接口即可。 在代码库分离方面,前端和后端拥有独立的代码仓库,前端可以使用Mock数据进行开发和测试,后端则可以编写...
配置好跨域访问(CORS)以允许前端和后端之间的通信。 总的来说,React框架在JavaWeb项目中的应用涉及到前端的组件化开发、后端的RESTful API设计、数据交互以及部署等多个方面。通过深入理解React和Spring Boot的...
"jersey-cors-filter.zip,用于添加cors头的jersey过滤器jersey filter提供cors头的简单配置" 提到的jersey-cors-filter是一个专门为Jersey(一个流行的Java RESTful Web服务客户端和服务器框架)设计的CORS(Cross-...
需要注意的是,服务器需要正确配置CORS策略,允许前端的跨域请求。 在这个过程中,前端和后端的交互通常遵循RESTful API设计原则,使用HTTP的GET或POST请求。前端发送JSON格式的数据,包含需要打印的PDF文件URL或ID...