解決網(wǎng)站跨域的幾種方式

1、什么是跨越？

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

2、為什么會(huì)產(chǎn)生跨域請(qǐng)求？

• 因?yàn)闉g覽器使用了同源策略

3、什么是同源策略？

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

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

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

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

發(fā)請(qǐng)求，這時(shí)瀏覽器就會(huì)報(bào)錯(cuò)，這就是跨域報(bào)錯(cuò)。

解決方案有五：

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

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

2、后臺(tái)Http請(qǐng)求轉(zhuǎn)發(fā)

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

try {
 HttpClient client = HttpClients.createDefault(); //client對(duì)象
 HttpGet get = new HttpGet("http://localhost:8080/test"); //創(chuàng)建get請(qǐng)求
 CloseableHttpResponse response = httpClient.execute(get); //執(zhí)行g(shù)et請(qǐng)求
 String mes = EntityUtils.toString(response.getEntity()); //將返回體的信息轉(zhuǎn)換為字符串
 System.out.println(mes);
} catch (ClientProtocolException e) {
 e.printStackTrace();
} catch (IOException e) {
 e.printStackTrace();
}

3、后臺(tái)配置同源Cors （推薦）

• 在SpringBoot2.0 上的跨域 用以下代碼配置 即可好解決你的前后端跨域請(qǐng)求問題

在SpringBoot2.0 上的跨域 用以下代碼配置 即可好解決你的前后端跨域請(qǐng)求問題

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;
/**
 * 實(shí)現(xiàn)基本的跨域請(qǐng)求
 * @author linhongcun
 *
 */
@Configuration
public class CorsConfig {
 @Bean
 public CorsFilter corsFilter() {
 final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
 final CorsConfiguration corsConfiguration = new CorsConfiguration();
 /*是否允許請(qǐng)求帶有驗(yàn)證信息*/
 corsConfiguration.setAllowCredentials(true);
 /*允許訪問的客戶端

域名*/ corsConfiguration.addAllowedOrigin("*"); /*允許服務(wù)端訪問的客戶端請(qǐng)求頭*/ 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的整合，實(shí)現(xiàn)了對(duì)服務(wù)實(shí)例的自動(dòng)化維護(hù)，所以在使用服務(wù)路由配置的時(shí)候，我們不需要向傳統(tǒng)路由配置方式那樣去指定具體的服務(wù)實(shí)例地址，只需要通過Ant模式配置文件參數(shù)即可

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

• 現(xiàn)在有兩個(gè)網(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;
 }
 }

• 如果是兩個(gè)端口想互相訪問接口 在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;
 }
 }

歡迎工作一到五年的Java工程師朋友們加入Java程序員開發(fā)： 721575865

群內(nèi)提供免費(fèi)的Java架構(gòu)學(xué)習(xí)資料（里面有高可用、高并發(fā)、高性能及分布式、Jvm性能調(diào)優(yōu)、Spring源碼，MyBatis，Netty,Redis,Kafka,Mysql,Zookeeper,Tomcat,Docker,Dubbo,Nginx等多個(gè)知識(shí)點(diǎn)的架構(gòu)資料）合理利用自己每一分每一秒的時(shí)間來學(xué)習(xí)提升自己，不要再用"沒有時(shí)間“來掩飾自己思想上的懶惰！趁年輕，使勁拼，給未來的自己一個(gè)交代！

名稱欄目：解決網(wǎng)站跨域的幾種方式
文章URL：http://www.bm7419.com/news1/102001.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、關(guān)鍵詞優(yōu)化、軟件開發(fā)、域名注冊(cè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)