網站跨域的五種解決方式

因為瀏覽器使用了同源策略，所以產生跨域請求。一個網頁向另一個不同域名/不同協定/不同埠的網頁請求資源，這就是跨域。本篇文章提供了5種方式來解決網站跨域，感興趣的朋友可以看看。

1、什麼是跨越？

• 一個網頁向另一個不同域名/不同協定/不同埠的網頁請求資源，這就是跨域。
• 跨域原因產生：在當前域名請求網站中，預設不允許通過ajax請求傳送其他域名。

2、為什麼會產生跨域請求？

• 因為瀏覽器使用了同源策略

3、什麼是同源策略？

• 同源策略是Netscape提出的一個著名的安全策略，現在所有支援JavaScript的瀏覽器都會使用這個策略。同源策略是瀏覽器最核心也最基本的安全功能，如果缺少同源策略，瀏覽器的正常功能可能受到影響。可以說web是構建在同源策略的基礎之上的，瀏覽器只是針對同源策略的一種實現。

4、為什麼瀏覽器要使用同源策略？

• 是為了保證使用者的資訊保安，防止惡意網站竊取資料，如果網頁之間不滿足同源要求，將不能:

• • 1、共用Cookie、LocalStorage、IndexDB
• • 2、獲取DOM
• • 3、AJAX請求不能傳送

同源策略的非絕對性：

<script></script>
<img/>
<iframe/>
<link/>
<video/>
<audio/>

等帶有src屬性的標籤可以從不同的域載入和執行資源。其他外掛的同源策略：flash、java applet、silverlight、googlegears等瀏覽器載入的第三方外掛也有各自的同源策略，只是這些同源策略不屬於瀏覽器原生的同源策略，如果有漏洞則可能被駭客利用，從而留下XSS攻擊的後患

所謂的同源指：域名、網路協定、埠號相同，三條有一條不同就會產生跨域。 例如：你用瀏覽器開啟http://baidu.com，瀏覽器執行JavaScript指令碼時發現指令碼向http://cloud.baidu.com域名發請求，這時瀏覽器就會報錯，這就是跨域報錯。

解決方案有五：

1、前端使用jsonp （不推薦使用）

• 當我們正常地請求一個JSON資料的時候，伺服器端返回的是一串 JSON型別的資料，而我們使用 JSONP模式來請求資料的時候伺服器端返回的是一段可執行的 JavaScript程式碼。因為jsonp 跨域的原理就是用的動態載入 script的src ，所以我們只能把引數通過 url的方式傳遞,所以jsonp的 type型別只能是get範例：

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 資料型別
    jsonp: 'backfunc', // 指定回撥函數名，與伺服器端接收的一致，並回傳回來
})

• 使用JSONP 模式來請求資料的整個流程：用戶端傳送一個請求，規定一個可執行的函數名（這裡就是 jQuery做了封裝的處理，自動幫你生成回撥函數並把資料取出來供success屬性方法來呼叫,而不是傳遞的一個回撥控製代碼），伺服器端接受了這個 backfunc函數名，然後把資料通過實參的形式傳送出去
  
• （在jquery 原始碼中， jsonp的實現方式是動態新增<script>標籤來呼叫伺服器提供的 js指令碼。jquery 會在window物件中載入一個全域性的函數，當 <script>程式碼插入時函數執行，執行完畢後就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個域名下那麼他就會像正常的 Ajax請求一樣工作。）

2、後台Http請求轉發

• 使用HttpClinet轉發進行轉發(簡單的例子 不推薦使用這種方式)

try {
    HttpClient client = HttpClients.createDefault();            //client物件
    HttpGet get = new HttpGet("http://localhost:8080/test");    //建立get請求
    CloseableHttpResponse response = httpClient.execute(get);   //執行get請求
    String mes = EntityUtils.toString(response.getEntity());    //將返回體的資訊轉換為字串
    System.out.println(mes);
} catch (ClientProtocolException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

3、後台設定同源Cors （推薦）

• 在SpringBoot2.0 上的跨域 用以下程式碼設定 即可完美解決你的前後端跨域請求問題

在SpringBoot2.0 上的跨域 用以下程式碼設定 即可完美解決你的前後端跨域請求問題

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 實現基本的跨域請求
 * @author linhongcun
 *
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允許請求帶有驗證資訊*/
        corsConfiguration.setAllowCredentials(true);
        /*允許存取的用戶端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允許伺服器端存取的用戶端請求頭*/
        corsConfiguration.addAllowedHeader("*");
        /*允許存取的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }



}

4、使用SpringCloud閘道器

• 服務閘道器(zuul)又稱路由中心，用來統一存取所有api介面，維護服務。

• Spring Cloud Zuul通過與Spring Cloud Eureka的整合，實現了對服務範例的自動化維護，所以在使用服務路由設定的時候，我們不需要向傳統路由設定方式那樣去指定具體的服務範例地址，只需要通過Ant模式組態檔引數即可

5、使用nginx做轉發

• 現在有兩個網站想互相存取介面 在http://a.a.com:81/A中想存取 http://b.b.com:81/B 那麼進行如下設定即可
• 然後通過存取 www.my.com/A 裡面即可存取 www.my.com/B

server {
        listen       80;
        server_name  www.my.com;
        location /A {
            proxy_pass  http://a.a.com:81/A;
            index  index.html index.htm;
        }
        location /B {
            proxy_pass  http://b.b.com:81/B;
            index  index.html index.htm;
        }
    }

• 如果是兩個埠想互相存取介面 在http://b.b.com:80/Api中想存取 http://b.b.com:81/Api 那麼進行如下設定即可
• 使用nginx轉發機制就可以完成跨域問題

server {
        listen       80;
        server_name  b.b.com;
        location /Api {
            proxy_pass  http://b.b.com:81/Api;
            index  index.html index.htm;
        }
    }

希望本篇文章對你有所幫助。

以上就是網站跨域的五種解決方式的詳細內容，更多請關注TW511.COM其它相關文章！