浏览器在执行脚本的时候,都会检查这个脚本属于哪个页面,即检查是否同源,只有同源的脚本才会被执行;而非同源的脚本在请求数据的时候,浏览器会报一个异常,提示拒绝访问。
①、upload/201808281159452567.png" alt="" style="margin: 0px; padding: 0px; border: 0px; max-width: 900px;" />
我们创建了两个 web 项目JavaWeb01 和 JavaWeb02 分别部署在tomcat1和Tomcat2上上,这两个 Tomcat 的端口号设置是不一样的,一个是 8080,一个是8081,所以这两个项目构成了非同源。那么我们从客户端(浏览器)输入访问部署在 Tomcat2 上的项目 JavaWeb2,然后在该项目中通过 ajax 去请求部署在 Tomcat1 上的项目数据,能够访问的到呢?
①、在 JavaWeb02 项目中,有一个 jsp 文件,我们通过在浏览器访问该 JSP 文件去获取 JavaWeb01 项目中的数据
View Code 通过ajax 访问
url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom"
去获取 JavaWeb01 项目中的数据。
②、在 JavaWeb01 项目中,创建一个 getPassWordByUserNameServlet 请求的 Servlet
View Code ③、在浏览器中输入 upload/201808281159467337.png" alt="" style="margin: 0px; padding: 0px; border: 0px; max-width: 900px;" />
浏览器给我们返回了一个错误,这就是浏览器同源策略导致的跨域访问会报错。那么该如何解决呢?
1 //*表示支持所有网站访问,也可以额外配置相应网站2 resp.setHeader("Access-Control-Allow-Origin", "*");
请求结果如下:

②、JSONP 方式
首先我们要修改 index.jsp 页面的 ajax 请求:
1 $.ajax({ 2 type:"get", 3 async:false, 4 url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom", 5 dataType:"jsonp",//数据类型为jsonp 6 jsonp:"backFunction",//服务端用于接收callBack调用的function名的参数 7 success:function (data) { 8 alert(data["passWord"]); 9 }, 10 error:function () { 11 alert("error"); 12 } 13 14 }); 注意:我们修改了 dataType 的数据类型为 jsonp,并且新增了 jsop 属性值为 “backFunction”。
接着在 JavaWeb01 项目的 Servlet 中进行如下修改:
1 @WebServlet("/getPassWordByUserNameServlet") 2 public class UserServlet extends HttpServlet{ 3 @Override 4 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
关键字: