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

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

三、常見解決辦法

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

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

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

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

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

但是CORS也具有一定的風險性，比如請求中只能說明來自于一個特定的域但不能驗證是否可信，而且也容易被第三方入侵。

nginx增加類似如下配置：

[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;??

????????}??

}??

如果沒有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這兩個庫文件，放到lib目錄下。（可在 http://search.maven.org上查詢并下載。）工程項目中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īng)用已在?http://www.test1.com?上了，而我們打算從?http://www.test2.com?請求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。 利用 CORS，http://www.test2.com?只需添加一個標頭，就可以允許來自?http://www.test1.com?的請求，下圖是我在PHP中的 hander() 設(shè)置，“*”號表示允許任何域向我們的服務(wù)端提交請求： ?

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

?

?

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

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

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

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

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

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

B 第二步：服務(wù)器accepted 第一步請求后 瀏覽器自動執(zhí)行第二步 發(fā)送真正的請求。此時 大多數(shù)人 會發(fā)現(xiàn)請求成功了，但是 有那么幾個人會發(fā)現(xiàn) 請求成功了但是沒有任何信息返回 why？因為你自定義的請求頭在服務(wù)器響應(yīng)中不存在！

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

“Access-Control-Allow-Headers 列表中不存在請求標頭 XXXXXX”【IE】，

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

這是因為 你的XXXX請求頭 沒有在服務(wù)器端被允許哦~

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

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

?次處作為見證 2016年1月25日20:21:28

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

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

客戶端代碼：

?

服務(wù)器端代碼

?

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

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

總結(jié)

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

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