No Access-Control-Allow-Origin header is present on the requested resource

software_development
,
  • 問題描述
  • 本質
  • 解法

問題描述

使用jQuery AJAX發出Request時，console出現No ‘Access-Control-Allow-Origin’ header is present on the requested resource

CORS.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
// ERROR, and show error message in console 
var url = "http://data.tycg.gov.tw/api/v1/rest/datastore/a1b4714b-3b75-4ff8-a8f2-cc377e4eaa0f?format=json";
// SUCCESS
var url = 'http://ptx.transportdata.tw/MOTC/v1/Bus/EstimatedTimeOfArrival/Thb?%24format=json&$top=10';

$.ajax({
   url: url,
   type: "GET",
   dataType: "JSON",
   success: function(data, textStatus, request) {
     alert("SUCCESS!!!");
     console.log(data);
   },
   error: function() {
     alert("ERROR!!!");
   }
 });

</script>

https://gist.githubusercontent.com/j2hongming/89c858fdf4fd510fd910787a64eb9f04/raw/c99e3642aa0cd58feb5038f2a8d07652efee65ff/CORS.js

本質

基於同源策略(Same-origin policy)所形成的議題
根據MDN所描述，同源的定義必須protocol, host, port相同
所以若要取得不同網域的資源會受到限制。

解法

HTTP response header加上Access-Control-Allow-Origin屬性，若有機會碰到Server端的前提下。

使用JSONP溝通，Client端和Server端都要支援。

JQuery降版到1.4，只能動到Client端，Server端是別人家的。

Ref.