无法通过AngularJS请求WSO2 API(已激活CORS) [英] Not able to request WSO2 API (with CORS activated) via AngularJS

问题描述

当我的客户端AngularJS应用尝试访问通过WSO2 API管理器(v2.0.0)公开的REST API时，我收到此响应(IP，端口替换为"am_host"和"am_port"):

When my client AngularJS app tried to reach some REST API exposed via WSO2 API Manager (v2.0.0), I get this response (IP, port replaced with "am_host" and "am_port") :

Refused to set unsafe header "Origin"
XMLHttpRequest cannot load http://am_host:am_port/ReferentielInfoConso/offres-tarifaires/identifiants. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

当我在Chrome开发者工具中检查标题时，我可以确认响应"OPTIONS"请求中没有"Access-Control-Allow-Origin"标题.

I can confirm "Access-Control-Allow-Origin" header is not present in the response to the "OPTIONS" request when I check the headers in Chrome developper tool.

当我在Chrome Advanced REST Client中使用相同的HTTP方法(GET/ReferentielInfoConso/offres-tarifaires/identifiants HTTP/1.1)请求相同的URL时，可以看到预期的标头"Access-Control-Allow-Origin"，并且可以访问资源:

When I request the same URL with same HTTP method (GET /ReferentielInfoConso/offres-tarifaires/identifiants HTTP/1.1) in Chrome Advanced REST Client, I can see the expected header "Access-Control-Allow-Origin" and I can get access to the resource :

那我应该怎么做才能使其在我的AngularJS应用程序中工作(不创建Node.js后端，我需要保持它的轻巧)?为什么在WSO2中启用CORS还不够?

So what should I do to make it work in my AngularJS App (without creating a Node.js backend, I need to keep it very light) ? Why enabling CORS in WSO2 is not enough ?

如果我的AngularJS应用程序直接通过Tomcat 7端点(默认情况下启用了CORS)而不通过WSO2 AM来请求API，那么它将运行完美.

EDIT : If my AngularJS app requests the API directly to the Tomcat 7 endpoint (CORS enabled by default) without going through WSO2 AM, it works perfectly.

当我的AngularJS应用试图在不发送授权令牌的情况下到达WSO2 API时，我收到401响应，其中包含预期的"Access-Control-Allow-Origin"标头.一旦添加令牌，看起来它通过WSO2 AM遵循了一条不同的路线，而我没有得到"Access-Control-Allow-Origin"标头.

EDIT 2 : When my AngularJS App tries to reach the WSO2 API without sending the authorization token, I get a 401 response including the expected "Access-Control-Allow-Origin" header. As soon as I add the token, it looks like it follows a different route through WSO2 AM and I don't get the "Access-Control-Allow-Origin" header.

如果我有一个"Autorization"标头并尝试直接到达我的Tomcat 7后端，我也会遇到跨域"问题，但是我想这是因为"Authorization"标头不在标头列表中允许在Tomcat conf中使用.不过，它在WSO2 AM允许的标头列表中(我添加了授权"和授权"以确保它可以正常工作.)

EDIT 3 : if I had an "Autorization" header and try to reach my Tomcat 7 backend directly, I get a "cross-origin" problem too but I guess it's because "Authorization" header is not in the list of headers allowed in Tomcat conf. It is in the list of headers allowed by WSO2 AM though (I've added both "authorization" and "Authorization" to be sure it will work).

推荐答案

所以这是最终答案:WSO2中存在多个错误，这些错误无法使CORS直接从Web应用程序直接与API交互(没有后端).

So here is the final answer : There are multiple bugs in WSO2 who don't make it easy to enable CORS to interact with APIs directly from a web app (no backend).

首先，出于无记录的原因，/token API不受存储库/conf/api-manager.xml中的全局api conf影响，因此您需要深入了解conf(存储库/部署/服务器)/synapse-configs/default/api/TokenAPI.xml)，然后添加CORSRequestHandler conf，以从同一目录中的任何其他xml文件复制它.

First of all, for no documented reason, the /token API is not affected by the global api conf in repository/conf/api-manager.xml, so you need to go deep in the conf (repository/deployment/server/synapse-configs/default/api/TokenAPI.xml) and add the CORSRequestHandler conf copying it from any other xml file in the same directory.

第二，当您使用默认版本的URL( http://host:port/Context/myapi 取代1.0版本的 http://host:port/Context/1.0/myapi 标记为默认版本)，您将不会收到CORS标头: https://wso2.org/jira/browse/APIMANAGER-5361

Secondly, when u use the default version URL (http://host:port/Context/myapi instead of http://host:port/Context/1.0/myapi when the 1.0 version is marked as default version), you won't receive the CORS headers : https://wso2.org/jira/browse/APIMANAGER-5361

因此，在 TokenAPI .xml中手动配置CORShandler并将我的调用替换为显式版本调用之后，我可以删除我的反向代理.我仍然希望纠正默认版本的错误，因为默认版本是一项有用的功能.

So after manually configuring CORShandler in TokenAPI.xml and replacing my calls with explicit version calls, I could remove my reverse-proxy. I'm still expecting the default version bug to be corrected cause default version is a useful feature.

这篇关于无法通过AngularJS请求WSO2 API(已激活CORS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！