一、什么是AJAX？ Asynchronous JavaScript and XML (Ajax ) 是驅(qū)動(dòng)新一代 Web 站點(diǎn)（流行術(shù)語(yǔ)為 Web 2.0 站點(diǎn)）的關(guān)鍵技術(shù)。Ajax 允許在不干擾 Web 應(yīng)用程序的顯示和行為的情況下在后臺(tái)進(jìn)行數(shù)據(jù)檢索。使用 XMLHttpRequest 函數(shù)獲取數(shù)據(jù)，它是一種 API，允許客戶端 JavaScript 通過(guò) HTTP 連接到遠(yuǎn)程服務(wù)器。Ajax 也是許多 mashup 的驅(qū)動(dòng)力，它可將來(lái)自多個(gè)地方的內(nèi)容集成為單一 Web 應(yīng)用程序。

二、為什么會(huì)有這個(gè)問(wèn)題？ ajax本身實(shí)際上是通過(guò)XMLHttpRequest對(duì)象來(lái)進(jìn)行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進(jìn)行跨域操作，所以會(huì)警告。

三、常見(jiàn)解決辦法

（1）使用script標(biāo)簽。 script調(diào)用沒(méi)有域的限制，我們可以將輸出的數(shù)據(jù)偽裝成script的變量。

（2）服務(wù)端腳本中轉(zhuǎn) 服務(wù)端腳本使用XMLHTTP沒(méi)有域的限制，但是耗費(fèi)服務(wù)器的資源。

（3）利用iframe 在同一個(gè)域名的各個(gè)子域名下，如果設(shè)置了document.domain，那么是可以相互調(diào)用JS的。

（4）JSONP 這個(gè)方法也是最解決正常AJAX和多人使用的。 JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。 首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。 此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。 然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp. 最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?#xff0c;放置到 function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。 客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）。

（5）CORS CORS-CrossOrigin Resources Sharing，也即跨源資源共享，它定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求。它是一個(gè)妥協(xié)，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來(lái)說(shuō)更加安全。簡(jiǎn)言之，CORS就是為了讓AJAX可以實(shí)現(xiàn)可控的跨域訪問(wèn)而生的。

但是CORS也具有一定的風(fēng)險(xiǎn)性，比如請(qǐng)求中只能說(shuō)明來(lái)自于一個(gè)特定的域但不能驗(yàn)證是否可信，而且也容易被第三方入侵。

nginx增加類(lèi)似如下配置：

[html]?view plaincopy

server?{??

????location?/?{??

????????if?($request_method?=?'OPTIONS')?{??

??????????add_header?'Access-Control-Allow-Origin'?'*';??

??????????add_header?'Access-Control-Allow-Credentials'?'true';??

??????????add_header?'Access-Control-Allow-Methods'?'GET,?POST,?OPTIONS';??

??????????add_header?'Access-Control-Allow-Headers'?'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';??

?????????#?add_header?'Access-Control-Max-Age'?1728000;??

??????????add_header?'Content-Type'?'text/plain?charset=UTF-8';??

??????????add_header?'Content-Length'?0;??

??????????return?200;??

????????}??

}??

如果沒(méi)有nginx轉(zhuǎn)發(fā)，java需要如下代碼：?

[html]?view plaincopy

rundata.getResponse().addHeader("Access-Control-Allow-Origin",?"*");??

rundata.getResponse().addHeader("Access-Control-Allow-Methods",?"GET,?POST,?OPTIONS");??

rundata.getResponse().addHeader("Access-Control-Allow-Headers",?"Origin,?No-Cache,?X-Requested-With,?If-Modified-Since,?Pragma,?Last-Modified,?Cache-Control,?Expires,?Content-Type,?X-E4M-With");??

Tomcat下的配置 下載cors-filter-1.7.jar，java-property-utils-1.9.jar這兩個(gè)庫(kù)文件，放到lib目錄下。（可在 http://search.maven.org上查詢并下載。）工程項(xiàng)目中web.xml中的配置如下：?

?

[html]?view plaincopy

<filter>??

????<filter-name>CORS</filter-name>??

????<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>??

????<init-param>??

?????<param-name>cors.allowOrigin</param-name>??

????????<param-value>*</param-value>??

????</init-param>??

????<init-param>??

?????<param-name>cors.supportedMethods</param-name>??

????????<param-value>GET,?POST,?HEAD,?PUT,?DELETE</param-value>??

????</init-param>??

????<init-param>??

?????<param-name>cors.supportedHeaders</param-name>??

????????<param-value>Accept,?Origin,?X-Requested-With,?Content-Type,?Last-Modified</param-value>??

????</init-param>??

????<init-param>??

????????<param-name>cors.exposedHeaders</param-name>??

????????<param-value>Set-Cookie</param-value>??

????</init-param>??

????<init-param>??

????????<param-name>cors.supportsCredentials</param-name>??

????????<param-value>true</param-value>??

????</init-param>??

</filter>??

<filter-mapping>??

????<filter-name>CORS</filter-name>??

????<url-pattern>/*</url-pattern>??

</filter-mapping>??

?

?

假設(shè)我們頁(yè)面或者應(yīng)用已在?http://www.test1.com?上了，而我們打算從?http://www.test2.com?請(qǐng)求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來(lái)請(qǐng)求將會(huì)失敗，瀏覽器也會(huì)返回“源不匹配”的錯(cuò)誤，"跨域"也就以此由來(lái)。 利用 CORS，http://www.test2.com?只需添加一個(gè)標(biāo)頭，就可以允許來(lái)自?http://www.test1.com?的請(qǐng)求，下圖是我在PHP中的 hander() 設(shè)置，“*”號(hào)表示允許任何域向我們的服務(wù)端提交請(qǐng)求： ?

　　也可以設(shè)置指定的域名，如域名?http://www.test2.com?，那么就允許來(lái)自這個(gè)域名的請(qǐng)求：

?

?

1.第一步 設(shè)置響應(yīng)頭

header('Access-Control-Allow-Origin:*'); ?//支持全域名訪問(wèn)，不安全，部署后需要固定限制為客戶端網(wǎng)址

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 動(dòng)作

header('Access-Control-Allow-Headers:x-requested-with,content-type'); ?//響應(yīng)頭 請(qǐng)按照自己需求添加。

2.第二部 了解IE chrome 等瀏覽器 對(duì)于 跨域請(qǐng)求并要求設(shè)置Headers自定義參數(shù)的時(shí)候的 "預(yù)請(qǐng)求" ? 就是如果遇到 跨域并設(shè)置headers的請(qǐng)求，所有請(qǐng)求需要兩步完成！

A 第一步：發(fā)送預(yù)請(qǐng)求 OPTIONS 請(qǐng)求。此時(shí) 服務(wù)器端需要對(duì)于OPTIONS請(qǐng)求作出響應(yīng) 一般使用202響應(yīng)即可 不用返回任何內(nèi)容信息。（能看到這份手稿的人，本人不相信你后臺(tái)處理不了一個(gè)options請(qǐng)求）

B 第二步：服務(wù)器accepted 第一步請(qǐng)求后 瀏覽器自動(dòng)執(zhí)行第二步 發(fā)送真正的請(qǐng)求。此時(shí) 大多數(shù)人 會(huì)發(fā)現(xiàn)請(qǐng)求成功了，但是 有那么幾個(gè)人會(huì)發(fā)現(xiàn) 請(qǐng)求成功了但是沒(méi)有任何信息返回 why？因?yàn)槟阕远x的請(qǐng)求頭在服務(wù)器響應(yīng)中不存在！

查看console輸出 會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：

“Access-Control-Allow-Headers 列表中不存在請(qǐng)求標(biāo)頭 XXXXXX”【IE】，

request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】

這是因?yàn)?你的XXXX請(qǐng)求頭 沒(méi)有在服務(wù)器端被允許哦~

遇到這個(gè)問(wèn)題 只有通過(guò)修改服務(wù)器端來(lái)完成，舉例：需要設(shè)置?requesttype這么一個(gè)自定義頭，那么 你需要在 服務(wù)端里面 將header('Access-Control-Allow-Headers:x-requested-with,content-type，requesttype'); ?同學(xué)們自行體會(huì)吧 這種語(yǔ)法就是根據(jù)“,”分割 自己需要設(shè)置什么頭，必須要在 服務(wù)端請(qǐng)求的響應(yīng)頭里面設(shè)置好，不然客戶端永遠(yuǎn)永遠(yuǎn)提交不上去！

至此 ?JavaScript/ajax ?跨域+ 修改httpheader 任務(wù)完美實(shí)現(xiàn)。前端 后端完全分離 大道自成！前后期分離迎來(lái)曠古的潮流

?次處作為見(jiàn)證 2016年1月25日20:21:28

"人們都一直在抱怨 JavaScript同源策略限制了web前端的發(fā)展！然而是服務(wù)端做的不夠細(xì)致！"

部分代碼參考如下：代碼只是提供了思想，具體步驟還要根據(jù)以上的文字 自行揣摩實(shí)現(xiàn)。以上內(nèi)容看不懂 說(shuō)明對(duì)于web一點(diǎn)也不了解，需要買(mǎi)本書(shū)看看嘍~（本人個(gè)人經(jīng)歷成功實(shí)現(xiàn)。若有人遇到同樣的問(wèn)題可以 加群245961308）

客戶端代碼：

?

服務(wù)器端代碼

?

轉(zhuǎn)載于:https://www.cnblogs.com/sprinng/p/5216126.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的ajax跨域解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。