角度拦截器和 CORS

Posted 2023-02-27

【中文标题】角度拦截器和 CORS

【英文标题】：Angular interceptors and CORS

【发布时间】：2017-10-09 16:57:19

【问题描述】：

我正在尝试编写一个拦截器来使用 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 相关的问题 - 或者这完全是服务器端的问题？

【参考方案1】：

同源策略是一种关键的安全机制，它限制从一个源加载的文档或脚本如何与另一个源的资源进行交互。它有助于隔离潜在的恶意文档，减少可能的攻击媒介。

这使您的应用更加安全。

CORS 使网络服务器能够表明他们希望允许跨域访问其资源。

我建议您在 Angular 服务器中使用代理，而不是使用 CORS，因此：

在浏览器中，不会显示真实资源（更多隐私和安全性） 您的代码与特定来源更加隔离

实施

在您的应用中创建 proxy.conf.json

    "/client-api/*": 
      "target": "http://127.0.0.1",
      "pathRewrite":  "^/client-api": "" ,
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
    
  

在您的 angular.json 文件中，在 projects.<your-project-name>.architect.serve.options 下添加

"proxyConfig": "src/proxy.conf.json"

在您发出 http 请求的地方，只需使用 url 来源 client-api。

例如，要获取国家/地区列表，您请求client-api/countries，代理会将其转换为http://127.0.0.1/countries

【参考方案2】：

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

https://developer.mozilla.org/en-US/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。

表示授权失败。这可能只是因为您的服务器未配置为永远为OPTIONS 请求发送成功响应（200 或204）——在这种情况下，您必须配置为执行此操作（发送200 或204 带有正确的 Access-Control-Allow-* 标头且没有响应正文）—或者可能是因为您尝试发送需要授权的请求并且授权失败。

【讨论】：

这实际上不是真的。我有类似的问题，当我从角度访问后端时，我得到了响应，但是当我添加拦截器并添加一些标头时，它会响应 CORS 错误。