Deployd - 通過AngularJS檢索的數據CORS

Question

我目前正在閱讀Adam Freeman的「Pro AngularJS」。在閱讀示例時，他讓讀者創建了一個使用Angular（當然）和Deployd服務器資源的體育商店應用程序。 Deployd資源設置爲返回要填充到模型中的JSON數據。我正在使用NodeJS來運行我的服務器。它目前安裝在5000端口（http://localhost:5000/sportsstore/app.html）。 Deployd資源在端口5500上運行（http://localhost:5500/products）。當打Deployd，響應如下：

[ 
    { "name": "Kayak", "description": "A boat for one person", "category": "Watersports", "price": 275, "id": "a1c999fc248b2959" }, 
    { "name": "Lifejacket", "description": "Protective and fashionable", "category": "Watersports", "price": 48.95, "id": "61303717cfad182e" }, 
    { "name": "Soccer Ball", "description": "FIFA-approved size and weight", "category": "Soccer", "price": 19.5, "id": "0fb5f67bdcbd992f" }, 
    { "name": "Corner Flags", "description": "Give your playing field a professional touch", "category": "Soccer", "price": 34.95, "id": "24385d315dd388b4" }, 
    { "name": "Stadium", "description": "Flat-packed 35,000-seat stadium", "category": "Soccer", "price": 79500, "id": "500fb6805905a856" }, 
    { "name": "Thinking Cap", "description": "Improve your brain efficiency by 75%", "category": "Chess", "price": 16, "id": "637d8a1f42e6fa1c" }, 
    { "name": "Unsteady Chair", "description": "Secretly give your opponent a disadvantage", "category": "Chess", "price": 29.95, "id": "73393312ec7dfab7" }, 
    { "name": "Human Chess Board", "description": "A fun game for the family", "category": "Chess", "price": 75, "id": "7871d02a662b0915" }, 
    { "name": "Bling-Bling King", "description": "Gold plated, diamon-studded King", "category": "Chess", "price": 1200, "id": "b59a3389a0e248bd" } 
] 

我試圖通過使用$http.get來獲取這些數據：

$http.get("http://localhost:5500/products") 
    .success(function (data) { ... }) 
    .error(function (error) { ... }); 

然而，這一直返回一個錯誤：

XMLHttpRequest cannot load http://localhost:5500/products. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. 

研究表明，Angular和CORS存在/存在一些問題，並且必須將頭配置爲運行跨域請求。其結果是，添加以下到我的app.config：

$http.defaults.useXDomain = true; 
delete $http.defaults.headers.common['X-Requested-With']; // this isn't needed anymore, but was put here as a just-in-case 

儘管有這些設置添加，我仍然得到錯誤。 Deployd文檔說它是爲CORS自動配置的（Cross-Origin Requests），只要請求中沒有包含無效的自定義標題，就會發送相應的標題信息。我敢肯定我的請求不包含無效的自定義頁眉：

Accept: application/json, text/plain, */* 
Cache-Control: max-age=0 
Origin: http://localhost:5000 
Referer: http://localhost:5000/sportsstore/app.html 
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36 

我的問題：是否有一些其他的配置，我需要落實到位，纔能有Deployd配置爲允許CORS請求來處理？本書不指定任何特殊的Angular頭文件設置或其他任何內容。

Answer 1

Bic，將您的deployd版本升級到版本0.6.10。這爲我做了詭計。我現在可以處理獲取請求。這似乎不是AngularJS代碼和Adam Freeman的書中的錯誤。

在書中，他確實提到他在http://www.apress.com/9781430264484上包含了源代碼下載的deployd程序。這是0.6.9版本。我相信它可以正常工作。這會比試圖找到0.6.10版更容易 - 這就是我所做的。如果您想要的版本，那就是：

https://www.versioneye.com/nodejs/deployd/0.6.10

這不是一個安裝程序，所以你必須將其粘貼到deployd目錄，替換node_modules。

Answer 2

您可以將您的文件（app.html，sportStore.js，...）你deployd項目的公共文件夾下，並使用以下URL http://localhost:5500/app.html

Answer 3

我做了什麼來解決這個問題是使用「--disable-web-security」標誌啓動Chrome。但首先去任務管理器並關閉你在那裏的每一個chrome進程。

Answer 4

只需在您的deployd安裝文件夾中運行「npm update」，它將確保您已更新到最新版本0.6.10。在閱讀javaauthority的答案後，這解決了我的問題（謝謝:)）。

Answer 5

我用小提琴來修改deployd的響應。此鏈接將顯示如何將自定義規則添加到小提琴手，以將Access-Control-Allow-Origin: *標頭添加到所有回覆。它效果很好。

http://www.leggetter.co.uk/2010/03/19/using-fiddler-to-help-develop-cross-domain-capable-javascript-web-applications.html

Answer 6

角也將發送DPD拒絕，把這個在你的代碼的開發，以消除這些和DPD將工作自定義頁眉：

delete $http.defaults.headers.common['X-Requested-With']; 

Answer 7

儘管我提供了正確的答案和別人有所改善如果您不使用本書中提到的Deployd Web服務器，該怎麼辦？我正在使用Wildfly（JBOSS 8.X），我不得不讓CORS問題爲它工作。我創建了一個名爲CorsFilter的簡單Java類。如果你正在運行Wildfly，導入應該很容易找到。

希望這可以幫助那些與不同Web服務器有類似問題的人。

請注意：responseContext.getHeaders（）。add（「Access-Control-Allow-Origin」，「*」）;

注意上面的行*這將允許任何請求成功。這通常適用於本地開發工作，但應該爲生產/分段環境實施更嚴格的安全控制。例如，您只能接受來自特定IP地址的請求。

import org.jboss.resteasy.annotations.interception.HeaderDecoratorPrecedence; 
import org.jboss.resteasy.annotations.interception.ServerInterceptor; 

import javax.servlet.FilterChain; 
import javax.servlet.ServletException; 
import javax.servlet.ServletRequest; 
import javax.servlet.ServletResponse; 
import javax.servlet.annotation.WebFilter; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.ws.rs.container.ContainerRequestContext; 
import javax.ws.rs.container.ContainerResponseContext; 
import javax.ws.rs.container.ContainerResponseFilter; 
import javax.ws.rs.ext.Provider; 
import java.io.IOException; 

/** 
* Class to . 
* User: Java Authority 
* Date: 12/6/2014 
* Time: 12:38 PM 
*/ 
@Provider 
@ServerInterceptor 
@HeaderDecoratorPrecedence 
@WebFilter 
public class CorsFilter implements ContainerResponseFilter { 

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { 
     HttpServletRequest r = (HttpServletRequest)request; 
     HttpServletResponse s = (HttpServletResponse)response; 
     chain.doFilter(request, response); 
    } 


    @Override 
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException { 
     responseContext.getHeaders().add("Access-Control-Allow-Origin", "*"); 
     responseContext.getHeaders().add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    } 
}