網站跨域的五種解決方式

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

1、什麼是跨越？

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

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

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

#3、什麼是同源策略？

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

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

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

• • 1、共享Cookie、LocalStorage、IndexDB
• • #2、取得DOM

• 3、AJAX請求不能發送

• 
  同源策略的非絕對性：

<script></script>
<img / alt="網站跨域的五種解決方式" >
<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></script>

標籤來呼叫伺服器提供的 js腳本。jquery 會在window物件中載入一個全域的函數，當 

<script></script>

程式碼插入時函數執行，執行完畢後就 

<script><li>會被移除。同時jquery也對非跨域的請求進行了優化，如果這個請求是在同一個網域下那麼他就會像正常的 Ajax請求一樣工作。）<p>2、後台Http請求轉送<li><p>#使用HttpClinet轉送進行轉送(簡單的範例不推薦使用這種方式)######## <pre class='brush:php;toolbar:false;'>try { HttpClient client = HttpClients.createDefault(); //client对象 HttpGet get = new HttpGet(&quot;http://localhost:8080/test&quot;); //创建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(); }</pre>###3、後台配置同源Cors （推薦）#########在SpringBoot2.0 上的跨域用以下程式碼配置即可完美解決你的前後端跨域請求問題### ######在SpringBoot2.0 上的跨域用以下程式碼配置即可完美解決你的前後端跨域請求問題###<pre class='brush:php;toolbar:false;'>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(&quot;*&quot;); /*允许服务端访问的客户端请求头*/ corsConfiguration.addAllowedHeader(&quot;*&quot;); /*允许访问的方法名,GET POST等*/ corsConfiguration.addAllowedMethod(&quot;*&quot;); urlBasedCorsConfigurationSource.registerCorsConfiguration(&quot;/**&quot;, corsConfiguration); return new CorsFilter(urlBasedCorsConfigurationSource); } }</pre>###4、使用SpringCloud網關######### ####服務網關(zuul)又稱路由中心，用來統一存取所有api接口，維護服務。 ############Spring Cloud Zuul透過與Spring Cloud Eureka的整合，實現了對服務實例的自動化維護，所以在使用服務路由配置的時候，我們不需要向傳統路由配置方式那樣去指定具體的服務實例位址，只需要透過Ant模式設定檔參數即可###</script>

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;
        }
    }

希望本篇文章对你有所帮助。

以上是網站跨域的五種解決方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！