Jquery ajax調用本地主機上的webservice錯誤

Question

我寫了一個web服務，返回Json格式的數據，我試過並測試過，所有這些工作都很好。我現在正忙於編寫一個可以使用html（當然）和jquery來處理實際調用的Web服務的Web客戶端。

這是jQuery的的片段，我用做電話：

$(document).ready(function() { 
    $.ajax({ 
     url: "http://localhost:8080/UserStore/webapi/myresource/4" 
    }).then(function(data) { 
     alert('id: ' + data.id + ", username: " + data.username + ", password: " + data.password + ", email: " + data.email); 
    }); 
}); 

在運行此我得到以下錯誤：

XMLHttpRequest cannot load http://localhost:8080/UserStore/webapi/myresource/4 . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost ' is therefore not allowed access.

這......是所有法國人我......我不懂法語......所以你去了。

Answer 1

作爲一種解決方法，如果網站和Web服務在同一臺計算機上工作，則可以使用機器的公共IP。因此，通過http://<your-public-ip>/和jQuery url: "http://<your-public-ip>"訪問該頁面。

但是，這隻有在端口是相同的，我猜。

如果站點和服務不在同一端口上，則必須在服務器端實施CORS。 （如果你使用Java EE，我可以張貼的例子。）

編輯：

Maven依賴：

<dependency> 
    <groupId>com.thetransactioncompany</groupId> 
    <artifactId>java-property-utils</artifactId> 
    <version>1.9.1</version> 
</dependency> 
<dependency> 
    <groupId>com.thetransactioncompany</groupId> 
    <artifactId>cors-filter</artifactId> 
    <version>1.9.1</version> 
</dependency> 

的web.xml

<filter> 
    <filter-name>CORS</filter-name> 
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> 
    <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>true</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>Content-Type, X-Requested-With</param-value> 
    </init-param> 
    <init-param> 
     <param-name>cors.exposedHeaders</param-name> 
     <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>-1</param-value> 
    </init-param> 
</filter> 
<filter-mapping> 
    <filter-name>CORS</filter-name> 
    <url-pattern>/rest/*</url-pattern> // map this to your Jersey-Servlet-Path 
</filter-mapping>