角拦截器和CORS

Question

我正在尝试编写一个拦截器，以使用Angular向所有HTTP请求添加令牌。我大致使用这里给出的食谱-https: //thinkster.io/interceptors

因此代码使用http模块工厂和一个tokenInterceptor()函数。我可以成功地将令牌添加为请求的标头-但是现在，当令牌通过拦截器时，它会被某种CORS阻止机制阻止。我在Chrome控制台中收到此错误-

XMLHttpRequest无法加载http://127.0.0.1：/。对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://127.0.0.1：/ ”。响应的HTTP状态码为403。

我尝试将拦截器如下所示的访问控制允许源标头设置为无效：

config.headers['Access-Control-Allow-Origin'] = '*';

我在网上尝试了一些建议，但没有帮助。要解决与CORS相关的问题，客户端是否需要做任何事情-还是服务器方面的问题？

Answer 1

响应请求的服务器需要发送请求的Access-Control-Allow-Origin响应标头OPTIONS，而不仅仅是发送GET和POST请求。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

对预检请求的响应未通过访问控制检查

浏览器给您该错误的原因是：在尝试尝试从前端JS代码发出的实际请求之前，浏览器发送了一个OPTIONS请求，以查看服务器是否以指示其选择接收请求的方式响应。您要尝试的那种。

所以，你的服务器端代码需要增加处理的OPTIONS请求与响应Access-Control-Allow-Origin，Access-Control-Allow-Headers及Access-Control-Allow-Methods。

要解决与CORS相关的问题，客户端是否需要做任何事情-还是服务器方面的问题？

您无法在客户端做任何更改行为或使您的浏览器不发出该错误的操作。CORS配置全是服务器端的问题。您的服务器必须处理OPTIONS。

响应的HTTP状态码为403。

这表明授权失败。那可能仅仅是因为您的服务器未配置为发送成功的请求响应（200或204）（OPTIONS在这种情况下，您必须配置为发送请求（发送200或204带有正确的Access-Control-Allow-*标头且没有响应主体））可能是因为您尝试发送需要授权的请求，而授权失败。