Question

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

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

XMLHttpRequest无法加载http://127.0.0.1：/。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://127.0.0.1：/＆＃39;是因此不允许访问。响应的HTTP状态代码为403。

我尝试在我的拦截器中设置访问控制允许原始标题，如下所示：

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

我在网上尝试了一些建议但没有帮助。是否需要在客户端完成修复CORS相关问题的任何事情 - 或者它是否都是服务器方面的问题？

Answer 1

响应请求的服务器需要发送Access-Control-Allow-Origin个请求的OPTIONS响应标头，而不仅仅是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＆amp; Access-Control-Allow-Methods。

是否有任何事情需要在客户端完成以修复与CORS相关的问题 - 或者它是否都是服务器方面的问题？

在客户端无法做任何事情来改变行为或让浏览器不发出错误。 CORS配置完全是服务器端关注的问题。您的服务器必须处理OPTIONS。

响应的HTTP状态代码为403。

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

Answer 2

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

这使您的应用程序更安全。

CORS使Web服务器可以说他们希望选择允许跨域访问其资源。

我建议您在角度服务器中使用代理，而不是使用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

角度拦截器和CORS

2 个答案:

实施