比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发。二者各有利弊,具体要使用哪种方式还需要具体的分析。
- 服务器设置响应头
- 服务器代理
- 客户端采用脚本回调机制。
方式一 Access-Control-Allow-Origin
Access-Control-Allow-Origin关键字只有在服务器端进行设置才
会生效。
如果知道客户端的域名或者请求的固定路径,则最好是不使用通配符的方式,来进一步保证安全性。如果不确定,那就是用*通配符好了。
Response.AddHeader("Access-Control-Allow-Origin","*");
方式二 jsonp方式
JSONP(JSON with Padding)HTML页面中script标签内容跨域跨域加载,对于script的src属性对应的内容,浏览器总是会对其进行加载
在服务器端组装出客户端预置好的json数据,通过回调的方式传回给客户端。
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>ajax 测试</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> </head> <body> <input type="text" name="talk" id="talk"> <input type="button" value="Test" id="btn"> <div id="content"></div> <script type="text/javascript"> function jsonpcallback(result) { for(var i in result) { alert(i+":"+result[i]); } } var JSONP = document.createElement("script"); JSONP.type='text/javascript'; JSONP.src='http://192.168.1.125:8080/logtest/log?callback=jsonpcallback'; document.getElementsByTagName('head')[0].appendChild(JSONP); </script> </body> </html>上面是用原生的js请求,用jquery ajax请求直接的话
$.ajax({ url: "http://" + ipPort + "/user/getUser",type: 'GET',dataType: 'jsonp',jsonp: 'callback',success: function (data) { alert('success:'+data); },fail: function () { alert('fail'); } });
服务器端:
package logtest; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; public class LogServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; Logger log = Logger.getLogger(LogServlet.class); @Override protected void doGet(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException { //跨域请求方式一 // resp.setHeader("Access-Control-Allow-Origin","*"); //跨域请求方式二 String callback = req.getParameter("callback"); resp.getWriter().print(callback+"({\"result\":\"succe\"})"); } }