I'm trying to implement a simple interceptor that allows me to display a message along the lines of "cannot contact the server" in my Angular app. However as the API is on a different host I'm dealing with CORS pre-flight OPTIONS requests.
我正在尝试实现一个简单的拦截器，它允许我在我的Angular应用程序中显示“无法联系服务器”的消息。但是，由于API位于不同的主机上，我正在处理CORS飞行前OPTIONS请求。
I've found that if the API is unavailable Chrome dev tools shows a 503 on the OPTIONS request but Angular's $http interceptor catches a 404 response to the subsequent GET request. I believe this is because the OPTIONS response did not contain the required CORS headers so the GET is actually never performed.
我发现如果API不可用，Chrome开发工具会在OPTIONS请求中显示503，但Angular的$ http拦截器会捕获对后续GET请求的404响应。我相信这是因为OPTIONS响应不包含所需的CORS头，因此实际上从未执行过GET。
Is is possible to intercept the OPTIONS response? If all I see is a 404 I can't distinguish "server down" from "no such resource".
是否有可能拦截OPTIONS响应？如果我看到的只是404，我无法区分“服务器关闭”和“没有这样的资源”。
1 个解决方案
#1
3
You can't intercept this request by design - the browser is "checking up" on you, making sure YOU should be allowed to make the request.
您无法通过设计拦截此请求 - 浏览器正在“检查”您，确保您应该被允许发出请求。
We've used three solutions to work around this:
我们使用了三种解决方案来解决这个问题：
- If the problem is that you're using a development environment like NodeJS, and your domain names aren't matching (that is, if you normally wouldn't need to deal with this in Production) you can use a proxy. The https://github.com/substack/bouncyBounceJS NodeJS Module is an easy to use option. Then your Web service request domain will match the domain your page is on, and the check won't be triggered. (You can also use tricks like this in Production, although it can be easily abused!)
- 如果问题是您正在使用像NodeJS这样的开发环境，并且您的域名不匹配（也就是说，如果您通常不需要在生产中处理此问题），则可以使用代理。 https://github.com/substack/bouncyBounceJS NodeJS模块是一个易于使用的选项。然后，您的Web服务请求域将与您的页面所在的域匹配，并且不会触发检查。 （你也可以在制作中使用这样的技巧，虽然它很容易被滥用！）
- Also for temporary use, you can use something like Fiddler or Charles to manipulate the request by faking the required headers, or tell your browser not to check them (--disable-web-security in Chrome).
- 另外，对于临时使用，您可以使用类似Fiddler或Charles的方法通过伪造所需的标题来操纵请求，或者告诉浏览器不要检查它们（ - Chrome中的--disable-web-security）。
- If you have this problem in Production, you either need to legitimately fix it (adjust the Web service handler to add the required headers - there are only two), or find a way to make the request in a way that doesn't trigger the check. For instance, if you control both the source and target domains, you can put a script on the target that makes the requests to itself. Run this in an IFRAME, invisibly. Then you can use things like postMessage() to communicate back and forth. Large services like Facebook use "XHR bridges" like this for the same reason.
- 如果您在生产中遇到此问题，则需要合法地修复它（调整Web服务处理程序以添加所需的标头 - 只有两个），或者找到一种方法以不触发请求的方式发出请求检查。例如，如果您同时控制源域和目标域，则可以在目标上放置一个脚本，以便向自己发出请求。无形地在IFRAME中运行它。然后你可以使用postMessage（）之类的东西来回沟通。像Facebook这样的大型服务出于同样的原因使用“XHR桥”。
#1
3
You can't intercept this request by design - the browser is "checking up" on you, making sure YOU should be allowed to make the request.
您无法通过设计拦截此请求 - 浏览器正在“检查”您，确保您应该被允许发出请求。
We've used three solutions to work around this:
我们使用了三种解决方案来解决这个问题：
- If the problem is that you're using a development environment like NodeJS, and your domain names aren't matching (that is, if you normally wouldn't need to deal with this in Production) you can use a proxy. The https://github.com/substack/bouncyBounceJS NodeJS Module is an easy to use option. Then your Web service request domain will match the domain your page is on, and the check won't be triggered. (You can also use tricks like this in Production, although it can be easily abused!)
- 如果问题是您正在使用像NodeJS这样的开发环境，并且您的域名不匹配（也就是说，如果您通常不需要在生产中处理此问题），则可以使用代理。 https://github.com/substack/bouncyBounceJS NodeJS模块是一个易于使用的选项。然后，您的Web服务请求域将与您的页面所在的域匹配，并且不会触发检查。 （你也可以在制作中使用这样的技巧，虽然它很容易被滥用！）
- Also for temporary use, you can use something like Fiddler or Charles to manipulate the request by faking the required headers, or tell your browser not to check them (--disable-web-security in Chrome).
- 另外，对于临时使用，您可以使用类似Fiddler或Charles的方法通过伪造所需的标题来操纵请求，或者告诉浏览器不要检查它们（ - Chrome中的--disable-web-security）。
- If you have this problem in Production, you either need to legitimately fix it (adjust the Web service handler to add the required headers - there are only two), or find a way to make the request in a way that doesn't trigger the check. For instance, if you control both the source and target domains, you can put a script on the target that makes the requests to itself. Run this in an IFRAME, invisibly. Then you can use things like postMessage() to communicate back and forth. Large services like Facebook use "XHR bridges" like this for the same reason.
- 如果您在生产中遇到此问题，则需要合法地修复它（调整Web服务处理程序以添加所需的标头 - 只有两个），或者找到一种方法以不触发请求的方式发出请求检查。例如，如果您同时控制源域和目标域，则可以在目标上放置一个脚本，以便向自己发出请求。无形地在IFRAME中运行它。然后你可以使用postMessage（）之类的东西来回沟通。像Facebook这样的大型服务出于同样的原因使用“XHR桥”。