如何解决跨域问题？
电脑杂谈 发布时间：2019-09-03 06:02:13 来源：网络整理
如何解决跨域问题？首先我们必须了解哪些是跨域，跨域指的是浏览器不能执行其他网页的类库怎么解决跨域问题，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。
根据百度百科同源策略它是由 Netscape 提出的一个安全思路，它是浏览器最核心只是最基本的安全功能，如果缺乏同源策略，则浏览器的正常功能也许就会得到影响，现在所有支持JavaScript的浏览器都会使用这个策略。
所谓同源指的是：
协议、域名、端口号都同样，只要有一个不相似，那么都是非同源。
浏览器在执行脚本的之后，都会检查这个脚本属于什么页面，即检测能否同源，只有同源的脚本就会被执行；而非同源的脚本在请求数据的之后，浏览器会报一个异常，提示拒绝访问。
①、 调用 协议、域名、端口号都同样，同源。
②、 调用 协议不同，非同源。
③、:8080/index.html 调用 :8081/welcome.jsp 端口不同，非同源。
④、 调用 域名不同，非同源。
⑤、:8080/index.html 调用 :8080/welcom.jsp 虽然localhost等同于 127.0.0.1 但是也有非同源的。
同源策略限制的状况：
1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM 和 Js对象能够获取
3、AJAX 请求不能发送
注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。
我们创建了两个 web 项目JavaWeb01 和 JavaWeb02 分别部署在tomcat1和Tomcat2上上，这两个 Tomcat 的端口号设置是不一样的，一个是 8080，一个是8081，所以这两个项目组成了非同源。那么我们从客户端（浏览器）输入访问部署在 Tomcat2 上的项目 JavaWeb2，然后在该项目中借助 ajax 去请求部署在 Tomcat1 上的项目数据，能够访问的到呢？
①、在 JavaWeb02 项目中，有一个 jsp 文件，我们通过在浏览器访问该 JSP 文件去获取 JavaWeb01 项目中的数据
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8" isELIgnored="false"%>
3 <%
4 String path = request.getContextPath();
5 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
6 + path;
7 %>
8 <!DOCTYPE html>
9 <head>
10 <title>Title</title>
11 </head>
12 <script type="text/javascript" src="<%=basePath%>/js/jquery-3.3.1.min.js"></script>
13 <script type="text/javascript">
14 $(document).ready(function(){
15 $.ajax({
16 type:"get",
17 async:false,
18 url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom",
19 dataType:"json",
20 success:function (data) {
21 alert(data['passWord']);
22 },
23 error:function () {
24 alert("error");
25 }
26
27 });
28 })
29
30 </script>
31 <body>
32
33 </body>
34 </html>
通过ajax 访问
url:":8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom"
去获取 JavaWeb01 项目中的数据。
②、在 JavaWeb01 项目中，创建一个getPassWordByUserNameServlet 请求的 Servlet
1 package com.ys.servlet;
2
3 import com.alibaba.fastjson.JSONObject;
4
5 import javax.servlet.ServletException;
6 import javax.servlet.annotation.WebServlet;
7 import javax.servlet.http.HttpServlet;
8 import javax.servlet.http.HttpServletRequest;
9 import javax.servlet.http.HttpServletResponse;
10 import java.io.IOException;
11
12 /**
13 * Create by YSOcean
14 */
15 @WebServlet("/getPassWordByUserNameServlet")
16 public class UserServlet extends HttpServlet{
17 @Override
18 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
19 String userName = req.getParameter("userName");
20 String passWord = null;
21 if(userName != null){
22 passWord = "123";
23 }
24 JSONObject jsonObject = new JSONObject();
25 jsonObject.put("passWord",passWord);
26 resp.getWriter().println(jsonObject.toJSONString());
27 }
28 }
③、在浏览器中输入:8081/JavaWeb02/index.jsp 链接怎么解决跨域问题，去读取该页面的 ajax 函数
浏览器给我们返回了一个错误，这就是浏览器同源策略造成的跨域访问会报错。那么该怎么解决呢？
我们在 Servlet 请求返回时添加如下代码：
1 //*表示支持所有网站访问，也可以额外配置相应网站
2 resp.setHeader("Access-Control-Allow-Origin", "*");
请求结果如下：
首先我们要更改 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) throws ServletException, IOException {
5 String userName = req.getParameter("userName");
6 String passWord = null;
7 if(userName != null){
8 passWord = "123";
9 }
10 JSONObject jsonObject = new JSONObject();
11 jsonObject.put("passWord",passWord);
12 //1、第一种方法：*表示支持所有网站访问，也可以额外配置相应网站
13 //resp.setHeader("Access-Control-Allow-Origin", "*");
14
15 //2、第二种方法：jsonp
16 String backFunction = req.getParameter("backFunction");
17 resp.getWriter().println(backFunction+"("+jsonObject.toJSONString()+")");
18
19 //resp.getWriter().println(jsonObject.toJSONString());
20 }
21 }
结果就不照片了，下面讲讲这种方法的机理。
1、在同源策略下，在某个服务器下的页面是能够获得到该服务器以外的数据的，即通常的ajax是不能进行跨域请求的。但img、iframe、script等标签是个例外，这些标签可以借助src属性请求到其它服务器上的数据。利用script标签的开放思路，我们可以推动跨域请求数据，当然这应该服务器端的配合。Jquery中ajax的核心是借助XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来读取服务器提供的js类库。
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-121523-1.html
globrand(全球品牌网)
Win8系统纯版本64位下载
小论文重复率要求 论文造假黑色产业链：百度做推广渗透500所高校 (
龙芯 3c_龙芯cpu_龙芯 购买
四是战争指挥失误