java后台设置可跨域访问,前端ajax获取json数据,解决浏览器限制跨域访问的问题
2018-03-02 19:50
1261 查看
在本地用ajax跨域访问请求时报错:XMLHttpRequest cannot loadhttp://xxx/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
今天有个同事叫我帮他解决一个bug,上面的红字就是浏览器的报错内容。
原来他的java后台项目和前端html分开了,没有放到一起,后台用myeclipse写的,放在本地电脑的tomcat上,前端html代码文件放在另一个地方,然后通过浏览器打开去访问本地tomcat的项目里的后台接口,然后就报上面的错了。
其实这是浏览器出于安全考虑限制了跨域访问,所以有两个选择,要么把ajax请求(也就是前端js代码)写到项目里就可以访问了,要么把跨域解决掉。要解决跨域访问的话我这里提供一个方法。
解决了跨域ajax在任何地方就都可以访问后台接口了,不管是在同一台电脑还是不在同一台电脑都可以访问。
废话不多说,解决方法如下:
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 HeaderFilter implements Filter
{
public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException
{
HttpServletResponse response = (HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
chain.doFilter(request, resp);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
<filter>
<filter-name>HeaderFilter</filter-name>
<filter-class>com.jgonet.filter.HeaderFilter</filter-class><!--你过滤器的包 -->
</filter>
<filter-mapping>
<filter-name>HeaderFilter</filter-name>
<url-pattern>/*</url-pattern><!-- 你开放的接口前缀 -->
</filter-mapping>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>消息框</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div>
<button onclick="test();">SEND</button>
</div>
<script>
function test() {
//var reqData = "{ 'name': '1001', 'password': '123456'}";
$.ajax({
url:'http://192.169.2.80:8080/procePlatform/employee/login.do',
method:'GET',
dataType:'json',
success:function(data){
alert("okok");
},
});
}
</script>
</body>
</html>
测试成功,截图如下:
项目结构如下:
前端文件:我放在电脑桌面
后台文件:我放在电脑D盘的tomcat里运行
后台项目结构:
好了,讲解到此结束,希望能帮到遇到类似问题的伙伴!
今天有个同事叫我帮他解决一个bug,上面的红字就是浏览器的报错内容。
原来他的java后台项目和前端html分开了,没有放到一起,后台用myeclipse写的,放在本地电脑的tomcat上,前端html代码文件放在另一个地方,然后通过浏览器打开去访问本地tomcat的项目里的后台接口,然后就报上面的错了。
其实这是浏览器出于安全考虑限制了跨域访问,所以有两个选择,要么把ajax请求(也就是前端js代码)写到项目里就可以访问了,要么把跨域解决掉。要解决跨域访问的话我这里提供一个方法。
解决了跨域ajax在任何地方就都可以访问后台接口了,不管是在同一台电脑还是不在同一台电脑都可以访问。
废话不多说,解决方法如下:
第一步:
新建一个Filter类:Filter是一个过滤器。对你设定的请求地址进行拦截,然后设置。package com.jgonet.filter;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 HeaderFilter implements Filter
{
public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException
{
HttpServletResponse response = (HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
chain.doFilter(request, resp);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
第二步:
在web.xml中配置:加入下面的代码。com.jgonet.filter.HeaderFilter是我类HeaderFilter的路径,你自己记得改下,放在哪个路径下就该成哪个。<filter>
<filter-name>HeaderFilter</filter-name>
<filter-class>com.jgonet.filter.HeaderFilter</filter-class><!--你过滤器的包 -->
</filter>
<filter-mapping>
<filter-name>HeaderFilter</filter-name>
<url-pattern>/*</url-pattern><!-- 你开放的接口前缀 -->
</filter-mapping>
第三步:写个ajax测试一下
这里url中192.169.2.80是我电脑的ip地址,8080是我电脑的tomcat的端口号,procePlatform项目名,employee/login.do接口路径。<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>消息框</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div>
<button onclick="test();">SEND</button>
</div>
<script>
function test() {
//var reqData = "{ 'name': '1001', 'password': '123456'}";
$.ajax({
url:'http://192.169.2.80:8080/procePlatform/employee/login.do',
method:'GET',
dataType:'json',
success:function(data){
alert("okok");
},
});
}
</script>
</body>
</html>
测试成功,截图如下:
项目结构如下:
前端文件:我放在电脑桌面
后台文件:我放在电脑D盘的tomcat里运行
后台项目结构:
好了,讲解到此结束,希望能帮到遇到类似问题的伙伴!
相关文章推荐
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
- ajax接收java后台传过来的json数据乱码及获取字段undefind问题
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- java设置响应头,解决跨域访问限制
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明
- java ajax post跨域请求传递json格式数据问题
- 解决部分浏览器ajax提交数据,数据已改变,却后台数据接收数据还是上一次值的问题
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明
- var dataObj=eval("("+data+")");//转换为json对象(解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误)
- Ext2.2+json+jsp获取后台数据的问题 --Ajax
- 解决ajax跨域获取数据的问题
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
- Java URLConnection 类,通过设置浏览器类型来解决访问受限问题
- 设置请求头解决浏览器同源问题,ajx跨域获取cookie问题
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
- struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- 前端使用ajax发送jsonp格式解决跨域访问的问题
- dhl:ajax无法跨域改用getJSON(解决服务器返回json数据中文为乱码的问题$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; chars)