Ajax跨域訪問出現Uncaught SyntaxError: Unexpected token : 解決方案
在訪問外網提供的Api時出現跨域問題，嘗試使用普通方式JSONP解決，但是出現Uncaught SyntaxError: Unexpected token : 的錯誤，所有專注於研究ajax請求跨域問題，在前人基礎上逐漸理出脈絡，以此記之，希望對大家有所幫助。蒐羅資源比較雜亂，所有看到“撒網要見魚”的一篇文章，下面的內容以此為藍本，加入自己的總結。感謝“撒網要見魚”。
關於跨域，有N種類型，本文只專注於ajax請求跨域(ajax跨域只是屬於瀏覽器”同源策略”中的一部分,其它的還有Cookie跨域iframe跨域,LocalStorage跨域等)。
本文大綱如下：
什麼是ajax跨域
- 原理
- 表現(整理了一些遇到的問題以及解決方案)
如何解決ajax跨域
- JSONP方式
- CORS方式
- 代理請求方式
如何分析ajax跨域
- http抓包的分析
- 一些示例
什麼是ajax跨域
ajax跨域的原理
ajax出現請求跨域錯誤問題,主要原因就是因為瀏覽器的“同源策略”,可以參考
瀏覽器同源政策及其規避方法(阮一峰)
CORS請求原理
CORS是一個W3C標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
基本上目前所有的瀏覽器都實現了CORS標準,其實目前幾乎所有的瀏覽器ajax請求都是基於CORS機制的,只不過可能平時前端開發人員並不關心而已(所以說其實現在CORS解決方案主要是考慮後臺該如何實現的問題)。
關於CORS，強烈推薦閱讀
跨域資源共享 CORS 詳解(阮一峰)
另外，這裡也整理了一個實現原理圖(簡化版):
如何判斷是否是簡單請求?
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。只要同時滿足以下兩大條件，就屬於簡單請求。
- 請求方法是以下三種方法之一：HEAD,GET,POST
- HTTP的頭資訊不超出以下幾種欄位：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type(只限於三個值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
凡是不同時滿足上面兩個條件，就屬於非簡單請求。
CORS實現跨域請求，是通過伺服器端配置的，不屬於我們要探討的引用網外API方式出現的問題。不過基於CORS是目前只要解決方案，下面有詳細的配置方式。
ajax跨域的表現
ajax請求時,如果存在跨域現象,並且沒有進行解決,會有如下表現:(注意，是ajax請求，請不要說為什麼http請求可以，而ajax不行，因為ajax是伴隨著跨域的，所以僅僅是http請求ok是不行的)。
注意:具體的後端跨域配置請看題綱位置。
第一種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource,並且The response had HTTP status code 404
出現這種情況的原因如下：
本次ajax請求是“非簡單請求”，所以請求前會發送一次預檢請求(OPTIONS)
伺服器端後臺介面沒有允許OPTIONS請求,導致無法找到對應介面地址
解決方案: 後端允許options請求
第二種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource,並且The response had HTTP status code 405
這種現象和第一種有區別,這種情況下，後臺方法允許OPTIONS請求,但是一些配置檔案中(如安全配置),阻止了OPTIONS請求,才會導致這個現象
解決方案: 後端關閉對應的安全配置
第三種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource,並且status 200
這種現象和第一種和第二種有區別,這種情況下，伺服器端後臺允許OPTIONS請求,並且介面也允許OPTIONS請求,但是頭部匹配時出現不匹配現象
比如origin頭部檢查不匹配,比如少了一些頭部的支援(如常見的X-Requested-With頭部),然後服務端就會將response返回給前端,前端檢測到這個後就觸發XHR.onerror,導致前端控制檯報錯
解決方案: 後端增加對應的頭部支援
第四種現象:heade contains multiple values '*,*'
表現現象是，後臺響應的http頭部資訊有兩個Access-Control-Allow-Origin:*
說實話，這種問題出現的主要原因就是進行跨域配置的人不瞭解原理，導致了重複配置，如:
常見於.net後臺(一般在web.config中配置了一次origin,然後程式碼中又手動添加了一次origin(比如程式碼手動設定了返回*))
常見於.net後臺(在IIS和專案的webconfig中同時設定Origin:*)
解決方案(一一對應):
建議刪除程式碼中手動新增的*，只用專案配置中的即可
建議刪除IIS下的配置*，只用專案配置中的即可
如何解決ajax跨域
一般ajax跨域解決就是通過JSONP解決或者CORS解決。
JSONP方式解決跨域問題
jsonp解決跨域問題是一個比較古老的方案(實際中不推薦使用),這裡做簡單介紹(實際專案中如果要使用JSONP,一般會使用JQ等對JSONP進行了封裝的類庫來進行ajax請求)
實現原理
JSONP之所以能夠用來解決跨域方案,主要是因為
$.get(url,{
"type":"shehui",
"key" : appkey
},function(res){
console.log(res);
},"jsonp");更加詳細的Ajax詳細內容可以參考https://www.jianshu.com/p/c94e49772123，還是比較詳盡的。
注意,一般的JSONP介面和普通介面返回資料是有區別的,所以介面如果要做JSONP相容,需要進行判斷是否有對應callback關鍵字引數,如果有則是JSONP請求，返回JSONP資料,否則返回普通資料。
下面以PHP例
...
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回撥引數，必需
if(!empty($callback)){
return $callback.'('.json_encode($depList).')';
}else{
return flag(200, "獲取成功", $depList);
}這樣做一個if判斷，使用時就可以相容json和jsonp兩種方式了。
使用注意
基於JSONP的實現原理,所以JSONP只能是“GET”請求,不能進行較為複雜的POST和其它請求,所以遇到那種情況,就得參考下面的CORS解決跨域了(所以如今它也基本被淘汰了)。
CORS解決跨域問題
CORS的原理上文中已經介紹了，這裡主要介紹的是，實際專案中，後端應該如何配置以解決問題(因為大量專案實踐都是由後端進行解決的)，這裡整理了一些常見的後端解決方案：
PHP後臺配置
PHP後臺得配置幾乎是所有後臺中最為簡單的,遵循如下步驟即可:
第一步:配置Php 後臺允許跨域
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要為跨域CORS配置的兩大基本資訊,Origin和headers第二步:配置Apache web伺服器跨域(httpd.conf中)
原始程式碼
<Directory />
AllowOverride none
Require all denied
</Directory>改為以下程式碼
<Directory />
Options FollowSymLinks
AllowOverride none
Order deny,allow
Allow from all
</Directory>Node.js後臺配置(express框架)
Node.js的後臺也相對來說比較簡單就可以進行配置。只需用express如下配置:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//這段僅僅為了方便返回json而已
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == 'OPTIONS') {
//讓options請求快速返回
res.sendStatus(200);
} else {
next();
}
});JAVA後臺配置
JAVA後臺配置只需要遵循如下步驟即可:
第一步:獲取依賴jar包
下載 cors-filter-1.7.jar, java-property-utils-1.9.jar 這兩個庫檔案放到lib目錄下。(放到對應專案的webcontent/WEB-INF/lib/下)
第二步:如果專案用了Maven構建的,請新增如下依賴到pom.xml中:(非maven請忽視)
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>[ version ]</version>
</dependency>其中版本應該是最新的穩定版本,CORS過濾器
第三步:新增CORS配置到專案的Web.xml中( App/WEB-INF/web.xml)
<!-- 跨域配置-->
<filter>
<!-- The CORS filter with parameters -->
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<!-- Note: All parameters are options, if omitted the CORS
Filter will fall back to the respective default values.
-->
<init-param>
<param-name>cors.allowGenericHttpRequests</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowSubdomains</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, OPTIONS</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>
<!--這裡可以新增一些自己的暴露Headers -->
<param-value>X-Test-1, X-Test-2</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.maxAge</param-name>
<param-value>3600</param-value>
</init-param>
</filter>
<filter-mapping>
<!-- CORS Filter mapping -->
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>請注意,以上配置檔案請放到web.xml的前面,作為第一個filter存在(可以有多個filter的)
第四步:可能的安全模組配置錯誤(注意，某些框架中-譬如公司私人框架，有安全模組的，有時候這些安全模組配置會影響跨域配置，這時候可以先嚐試關閉它們)
JAVA Spring Boot配置
20171230補充
僅列舉簡單的全域性配置
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 可以自行篩選
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}新建配置，然後新增Configuration註解即可配置成功
PS：這一部分方法是收錄的，沒有親身實踐過，但根據反饋，理論上可行
NET後臺配置
.NET後臺配置可以參考如下步驟:
第一步:網站配置
開啟控制面板，選擇管理工具,選擇iis;右鍵單擊自己的網站，選擇瀏覽;開啟網站所在目錄,用記事本開啟web.config檔案新增下述配置資訊,重啟網站
請注意,以上截圖較老,如果配置仍然出問題,可以考慮增加更多的headers允許,比如:
"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"第二步:其它更多配置,如果第一步進行了後,仍然有跨域問題，可能是:
- 介面中有限制死一些請求型別(比如寫死了POST等)，這時候請去除限 制
- 介面中，重複配置了Origin:*，請去除即可
- IIS伺服器中，重複配置了Origin:*，請去除即可
代理請求方式解決介面跨域問題
這個就是文章前面所說的，使用JSONP的時候出現Uncaught SyntaxError: Unexpected token : 的暫緩解決方案。
在使用JSONP的時候，由於伺服器介面返回的資料型別並不是Jsonp格式，造成由於格式問題的報錯，如圖：
這時候，我們引入JSONP 跨域訪問代理API-yahooapis：http://query.yahooapis.com/v1/public/yql
程式碼例項如下：
$.ajax({
type: 'GET',
url:durl,
dataType:'jsonp',
jsonp:"callback",
data: {
q: "select * from json where url=\"http://v.juhe.cn/toutiao/index?type=shehui&key=989c40de0a1c5c3618f9469e8271f488\"",
format: "json"
},
success: function(data) {
// JSON.stringify(data);
var data=data.query.results.json.result.data;
console.log(data);
},
error: function(error) {
console.log(error);
}
});由於我們要說的是應用外網API的實現方案，只是在前端實現，所有就是具體說怎樣在開發環境中實現介面代理的，基本都是基於node.js的，大家可以搜尋關鍵字node.js,代理請求即可找到一大票的方案。
如何分析ajax跨域
上述已經介紹了跨域的原理以及如何解決，但實際過程中，發現仍然有很多人對照著類似的文件無法解決跨域問題，主要體現在，前端人員不知道什麼時候是跨域問題造成的，什麼時候不是，因此這裡稍微介紹下如何分析一個請求是否跨域:
抓包請求資料
第一步當然是得知道我們的ajax請求傳送了什麼資料，接收了什麼，做到這一步並不難，也不需要fiddler等工具，僅基於Chrome即可
- Chrome瀏覽器開啟對應發生ajax的頁面，F12開啟Dev Tools
- 傳送ajax請求
- 右側面板->NetWork->XHR，然後找到剛才的ajax請求，點進去，
示例一(正常的ajax請求)
上述請求是一個正確的請求，為了方便，我把每一個頭域的意思都表明了，我們可以清晰的看到，介面返回的響應頭域中，包括了
Access-Control-Allow-Headers: X-Requested-With,Content-Type,Accept
Access-Control-Allow-Methods: Get,Post,Put,OPTIONS
Access-Control-Allow-Origin: *所以瀏覽器接收到響應時，判斷的是正確的請求，自然不會報錯，成功的拿到了響應資料。
示例二(跨域錯誤的ajax請求)
為了方便，我們仍然拿上面的錯誤表現示例舉例。
這個請求中，介面Allow裡面沒有包括OPTIONS，所以請求出現了跨域。
這個請求中，Access-Control-Allow-Origin: *出現了兩次，導致了跨域配置沒有正確配置，出現了錯誤。
更多跨域錯誤基本都是類似的，就是以上三樣沒有滿足(Headers,Allow,Origin)，這裡不再一一贅述。
示例三(與跨域無關的ajax請求)
當然，也並不是所有的ajax請求錯誤都與跨域有關，所以請不要混淆，比如以下:
比如這個請求，它的跨域配置沒有一點問題，它出錯僅僅是因為request的Accept和response的Content-Type不匹配而已。