Question

我正在http://localhost:8080上本地运行Vue应用程序，但不断出现CORS错误，我添加了Access-Control-Allow-Origin标头，但受到打击，但始终收到以下警告：

”已被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

const graphCall = () => {

  let tokenOptions = {
    method: 'POST',
    uri: 'https://login.microsoftonline.com/**key**/oauth2/v2.0/token',
    headers: {
      'Access-Control-Allow-Origin': 'http://localhost:8080',
      'contentType': 'application/x-www-form-urlencoded'
    },

    form: {
      grant_type: VUE_APP_GRANT_TYPE,
      client_secret: VUE_APP_CLIENT_SECRET,
      scope: VUE_APP_SCOPE,
      client_id: VUE_APP_CLIENT_ID
    }

  };

  return rp(tokenOptions)
    .then(data => {

      console.log(data)


    }).catch((err) => {

      console.log(err);

    });
};

我尝试添加模式：'no-cors'，但得到以下信息-错误：opts.mode的值无效

我也尝试过将“ *”作为访问控制源，但无济于事。

有没有办法解决这个CORS噩梦，我们需要拨打电话来检索密钥！

Answer 1

服务器必须允许您的来源，在这种情况下为http://localhost:8080。通常，在与提供程序进行交互的情况下，在创建令牌的管理门户中，还必须指定要从中调用它的域。

如果不是这种情况，则可能是由于使用的标题不在CORS安全列表中而触发了CORS。 https://fetch.spec.whatwg.org/#cors-safelisted-request-header

Access-Control-Allow-Origin通常是服务器在响应中提供的标头，并不是要在请求上发送。

以下链接帮助我更好地了解了CORS。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

请注意，允许*的来源对于开发来说是不错的选择，但对于生产应用程序则不建议这样做。

已被CORS政策阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-Origin

1 个答案: