如何解決跨域問題？

時間 2019-11-21

標籤如何解決問題简体版

原文原文鏈接

目錄javascript

　　如何解決跨域問題？首先咱們須要知道什麼是跨域，跨域指的是瀏覽器不能執行其它網站的腳本，它是由瀏覽器的同源策略形成的，是瀏覽器對JavaScript 施加的安全限制。html

回到頂部

一、同源策略

　　根據百度百科同源策略它是由 Netscape 提出的一個安全策略，它是瀏覽器最核心也是最基本的安全功能，若是缺乏同源策略，則瀏覽器的正常功能可能都會受到影響，如今全部支持JavaScript的瀏覽器都會使用這個策略。java

　　所謂同源指的是：nginx

　　協議、域名、端口號都相同，只要有一個不相同，那麼都是非同源。web

　　瀏覽器在執行腳本的時候，都會檢查這個腳本屬於哪一個頁面，即檢查是否同源，只有同源的腳本纔會被執行；而非同源的腳本在請求數據的時候，瀏覽器會報一個異常，提示拒絕訪問。ajax

　　①、http://www.123.com/index.html 調用 http://www.123.com/welcome.jsp 協議、域名、端口號都相同，同源。apache

　　②、https://www.123.com/index.html 調用 http://www.123.com/welcome.jsp 協議不一樣，非同源。json

　　③、http://www.123.com:8080/index.html 調用 http://www.123.com:8081/welcome.jsp 端口不一樣，非同源。後端

　　④、http://www.123.com/index.html 調用 http://www.456.com/welcome.jsp 域名不一樣，非同源。跨域

　　⑤、http://localhost:8080/index.html 調用 http://127.0.0.1:8080/welcom.jsp 雖然localhost等同於 127.0.0.1 可是也是非同源的。

　　同源策略限制的狀況：

　　一、Cookie、LocalStorage 和 IndexDB 沒法讀取

　　二、DOM 和 Js對象沒法得到

　　三、AJAX 請求不能發送

　　注意：對於像 img、iframe、script 等標籤的 src 屬性是特例，它們是能夠訪問非同源網站的資源的。

回到頂部

二、跨域實例演示

　　咱們建立了兩個 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

　　③、在瀏覽器中輸入 http://localhost:8081/JavaWeb02/index.jsp 連接，去調用該頁面的 ajax 函數

　　瀏覽器給咱們返回了一個錯誤，這就是瀏覽器同源策略致使的跨域訪問會報錯。那麼該如何解決呢？

回到頂部

三、跨域解決辦法

①、response 添加 header

　　咱們在 Servlet 請求返回時添加以下代碼：

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) 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         //一、第一種方法：*表示支持全部網站訪問，也能夠額外配置相應網站
13         //resp.setHeader("Access-Control-Allow-Origin", "*");
14 
15         //二、第二種方法：jsonp
16         String backFunction = req.getParameter("backFunction");
17         resp.getWriter().println(backFunction+"("+jsonObject.toJSONString()+")");
18         
19         //resp.getWriter().println(jsonObject.toJSONString());
20     }
21 }

　　結果就不截圖了，下面講講這種方式的原理。

　　一、在同源策略下，在某個服務器下的頁面是沒法獲取到該服務器之外的數據的，即通常的ajax是不能進行跨域請求的。但 img、iframe 、script等標籤是個例外，這些標籤能夠經過src屬性請求到其餘服務器上的數據。利用 script標籤的開放策略，咱們能夠實現跨域請求數據，固然這須要服務器端的配合。 Jquery中ajax 的核心是經過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加 <script>標籤來調用服務器提供的 js腳本。

　　二、當咱們正常地請求一個JSON數據的時候，服務端返回的是一串 JSON類型的數據，而咱們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的 JavaScript代碼。由於jsonp 跨域的原理就是用的動態加載 script的src ，因此咱們只能把參數經過 url的方式傳遞,因此jsonp的 type類型只能是get ！

　　咱們能夠看上面的請求，瀏覽器按 F12 顯示以下：

　　咱們將這段路徑單獨複製出來：

http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom&backFunction=jQuery33107285685756141047_1532791502227&_=1532791502228

　　再看 Preview 頁：

　　也就是說對於上面的JSONP 請求，其實jQuery會轉化爲：

1 <script type="text/javascript" 
2         src="http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom&backFunction=jQuery33107285685756141047_1532791502227&_=1532791502228">
3 </script>

　　而後動態的去加載該 script 標籤的 src 屬性。

③、HttpClient 請求轉發

　　這種方式客戶端是向 JavaWeb02 項目發送請求，而不是上面的向 JavaWeb01 發送請求，而後在 JavaWeb02 的後臺經過 HttpClient 將請求發送到 JavaWeb01，獲得數據後返回。這種方式至關於繞過瀏覽器的同源機制，直接經過後端進行轉發。

　　index.jsp 的ajax請求以下：

 1 $.ajax({
 2             type:"get",
 3             async:false,
 4             url:"http://localhost:8081/JavaWeb02/ToGetPassWordServlet?userName=Tom",
 5             dataType:"json",
 6             success:function (data) {
 7                 alert(data['passWord']);
 8             },
 9             error:function () {
10                 alert("error");
11             }
12 
13         });

　　注意咱們是在 JavaWeb02 項目下的index.jsp 發送請求，請求路徑也是 JavaWeb02 下的 Servlet。

package com.ys.servlet;

import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Create by YSOcean
 */
@WebServlet("/ToGetPassWordServlet")
public class ToGetPassWordServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //獲取用戶名
        String userName = req.getParameter("userName");
        CloseableHttpClient httpClient = HttpClients.createDefault();
        //建立get請求
        HttpGet hget = new HttpGet("http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName="+userName);
        CloseableHttpResponse httpResponse = httpClient.execute(hget);
        int code = httpResponse.getStatusLine().getStatusCode();
        if(code == 200){
            String result = EntityUtils.toString(httpResponse.getEntity());
            resp.getWriter().print(result);
        }
        httpResponse.close();
        httpClient.close();

    }
}