網(wǎng)站跨域有哪些解決方法

這篇文章主要介紹了網(wǎng)站跨域有哪些解決方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

1、什么是跨越？

• 一個網(wǎng)頁向另一個不同域名/不同協(xié)議/不同端口的網(wǎng)頁請求資源，這就是跨域。
• 跨域原因產(chǎn)生：在當(dāng)前域名請求網(wǎng)站中，默認(rèn)不允許通過ajax請求發(fā)送其他域名。

2、為什么會產(chǎn)生跨域請求？

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

3、什么是同源策略？

• 同源策略是Netscape提出的一個著名的安全策略，現(xiàn)在所有支持JavaScript的瀏覽器都會使用這個策略。同源策略是瀏覽器最核心也最基本的安全功能，如果缺少同源策略，瀏覽器的正常功能可能受到影響?？梢哉fweb是構(gòu)建在同源策略的基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。

undefined

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

• 是為了保證用戶的信息安全，防止惡意網(wǎng)站竊取數(shù)據(jù)，如果網(wǎng)頁之間不滿足同源要求，將不能:

• • 1、共享Cookie、LocalStorage、IndexDB
• • 2、獲取DOM
• • 3、AJAX請求不能發(fā)送

同源策略的非絕對性：

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

等帶有src屬性的標(biāo)簽可以從不同的域加載和執(zhí)行資源。其他插件的同源策略：flash、java applet、silverlight、googlegears等瀏覽器加載的第三方插件也有各自的同源策略，只是這些同源策略不屬于瀏覽器原生的同源策略，如果有漏洞則可能被黑客利用，從而留下XSS攻擊的后患

所謂的同源指：域名、網(wǎng)絡(luò)協(xié)議、端口號相同，三條有一條不同就會產(chǎn)生跨域。 例如：你用瀏覽器打開http://baidu.com，瀏覽器執(zhí)行JavaScript腳本時發(fā)現(xiàn)腳本向http://cloud.baidu.com域名發(fā)請求，這時瀏覽器就會報錯，這就是跨域報錯。

解決方案有五：

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

• 當(dāng)我們正常地請求一個JSON數(shù)據(jù)的時候，服務(wù)端返回的是一串 JSON類型的數(shù)據(jù)，而我們使用 JSONP模式來請求數(shù)據(jù)的時候服務(wù)端返回的是一段可執(zhí)行的 JavaScript代碼。因為jsonp 跨域的原理就是用的動態(tài)加載 script的src ，所以我們只能把參數(shù)通過 url的方式傳遞,所以jsonp的 type類型只能是get示例：

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 數(shù)據(jù)類型
    jsonp: 'backfunc', // 指定回調(diào)函數(shù)名，與服務(wù)器端接收的一致，并回傳回來
})

• 使用JSONP 模式來請求數(shù)據(jù)的整個流程：客戶端發(fā)送一個請求，規(guī)定一個可執(zhí)行的函數(shù)名（這里就是 jQuery做了封裝的處理，自動幫你生成回調(diào)函數(shù)并把數(shù)據(jù)取出來供success屬性方法來調(diào)用,而不是傳遞的一個回調(diào)句柄），服務(wù)器端接受了這個 backfunc函數(shù)名，然后把數(shù)據(jù)通過實參的形式發(fā)送出去
  
• （在jquery 源碼中， jsonp的實現(xiàn)方式是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的 js腳本。jquery 會在window對象中加載一個全局的函數(shù)，當(dāng) <script>代碼插入時函數(shù)執(zhí)行，執(zhí)行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進(jìn)行了優(yōu)化，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作。）

2、后臺Http請求轉(zhuǎn)發(fā)

• 使用HttpClinet轉(zhuǎn)發(fā)進(jìn)行轉(zhuǎn)發(fā)(簡單的例子 不推薦使用這種方式)

try {
    HttpClient client = HttpClients.createDefault();            //client對象
    HttpGet get = new HttpGet("http://localhost:8080/test");    //創(chuàng)建get請求
    CloseableHttpResponse response = httpClient.execute(get);   //執(zhí)行g(shù)et請求
    String mes = EntityUtils.toString(response.getEntity());    //將返回體的信息轉(zhuǎn)換為字符串
    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;

/**
 * 實現(xiàn)基本的跨域請求
 * @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("*");
        /*允許服務(wù)端訪問的客戶端請求頭*/
        corsConfiguration.addAllowedHeader("*");
        /*允許訪問的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }



}

4、使用SpringCloud網(wǎng)關(guān)

• 服務(wù)網(wǎng)關(guān)(zuul)又稱路由中心，用來統(tǒng)一訪問所有api接口，維護(hù)服務(wù)。

• Spring Cloud Zuul通過與Spring Cloud Eureka的整合，實現(xiàn)了對服務(wù)實例的自動化維護(hù)，所以在使用服務(wù)路由配置的時候，我們不需要向傳統(tǒng)路由配置方式那樣去指定具體的服務(wù)實例地址，只需要通過Ant模式配置文件參數(shù)即可

5、使用nginx做轉(zhuǎn)發(fā)

• 現(xiàn)在有兩個網(wǎng)站想互相訪問接口  在http://a.a.com:81/A中想訪問 http://b.b.com:81/B 那么進(jìn)行如下配置即可
• 然后通過訪問 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 那么進(jìn)行如下配置即可
• 使用nginx轉(zhuǎn)發(fā)機(jī)制就可以完成跨域問題

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享網(wǎng)站跨域有哪些解決方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!