已部署 - 通过 AngularJS CORS 检索的数据

Posted 2023-03-04

【中文标题】已部署 - 通过 AngularJS CORS 检索的数据

【英文标题】：Deployd - Data retrieved via AngularJS CORS

【发布时间】：2014-06-14 08:10:09

【问题描述】：

我目前正在阅读 Adam Freeman 的“Pro AngularJS”。在浏览示例时，他让读者使用 Angular（当然）和已部署的服务器资源创建一个体育商店应用程序。 Deployd 资源设置为返回要填充到模型中的 JSON 数据。我正在使用 NodeJS 来运行我的服务器。它当前设置在端口 5000 (http://localhost:5000/sportsstore/app.html) 上。已部署资源在端口 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 标头设置或其他任何内容。

【问题讨论】：

我遇到了完全相同的问题。

【参考方案1】：

您可以将文件（app.html、sportStore.js、...）放在已部署项目的公共文件夹下，并使用以下 URL http://localhost:5500/app.html

【讨论】：

这是一个不能解决 CORS 问题的变通方法。如果文件放在同一个文件夹中，那么请求将来自同一个域。

是的，很抱歉应该提到这是一种解决方法，而不是 CORS 问题的解决方案。

【参考方案2】：

我为解决这个问题所做的就是使用“--disable-web-security”标志启动 Chrome。但首先转到任务管理器并关闭您在那里的每个 chrome 进程。

【参考方案3】：

Bic，将您的已部署版本升级到 0.6.10 版。这对我有用。我现在能够处理获取请求。 AngularJS 代码和 Adam Freeman 的书似乎都不是错误。

在书中，他确实提到他包含了已部署的程序以及在http://www.apress.com/9781430264484 上下载的源代码。那是0.6.9版。我确信它可以正常工作。这比尝试找到 0.6.10 版本要容易。这就是我所做的。如果你想要那个版本，这里是：

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

它不是安装程序，因此您必须将其粘贴到部署目录中，替换 node_modules。

【讨论】：

我升级到了0.6.9，按照建议从书籍资源中获得。我认为他们实际网站上的版本是 0.6.1，这显然是落后了。以太方式，这有效并接受了答案。谢谢。

我的 dpd 版本是 0.6.1，它不工作，我有同样的 CORS 问题

不错！这对我有用。顺便说一句，Deployd 的默认安装位置是：C:\Program Files (x86)\Deployd

知道我必须从这条评论中更新，但不知道如何更新（无需安装和重新安装）。结合 javaauthority、BeDare 和 Serj Sagans cmets，我知道该怎么做。因此，对于查看此内容的其他人，您需要执行以下操作：转到“C:\Program Files (x86)\Deployd”，打开 Admin cmd 提示符，键入“npm update”，一旦重新启动部署的服务器，一切都应该工作。

"npm update" 我第一次运行它时失败 - 再次运行成功完成并更新到 v0.7.0 - CORS 现在工作

【参考方案4】：

只需在您部署的安装文件夹中运行“npm update”，它就会确保您已更新到最新版本 0.6.10。在阅读了 javaauthority 的答案后，这为我解决了这个问题（谢谢 :)）。

【参考方案5】：

我使用 fiddler 来修改已部署的响应。此链接将显示如何向提琴手添加自定义规则以将 Access-Control-Allow-Origin: * 标头添加到所有响应中。效果很好。

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

【参考方案6】：

Angular 还会发送 DPD 拒绝的自定义标头，将其放入您的代码中以供开发人员删除这些标头，DPD 将起作用：

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

【参考方案7】：

虽然我提供了正确答案并且其他人已经改进了它，但如果您没有使用书中提到的 Deployd Web 服务器怎么办？我正在使用 Wildfly (JBOSS 8.X)，我必须解决 CORS 问题。我创建了一个名为 CorsFilter 的简单 Java 类。如果您正在运行 Wildfly，导入应该相当容易找到。

希望这可以帮助其他在不同网络服务器上遇到类似问题的人。

请注意：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");