无法通过 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 开发人员工具中检查标头时，我可以确认Access-Control-Allow-Origin"标头不存在于对OPTIONS"请求的响应中.
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 高级 REST 客户端中使用相同的 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)请求 API，而不通过 WSO2 AM，它可以完美运行.
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.
编辑 2:当我的 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.
编辑 3:如果我有一个Autorization"标头并尝试直接访问我的 Tomcat 7 后端，我也会遇到跨域"问题，但我想这是因为Authorization"标头不在标头列表中在 Tomcat 配置中允许.它在 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 不受 repository/conf/api-manager.xml 中的全局 api conf 影响，因此您需要深入 conf (repository/deployment/server/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 而不是 http://host:port/Context/1.0/myapi 当 1.0 版本标记为默认版本)，您将不会收到 CORS 标头:https://wso2.org/jira/浏览/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屋！
