预检响应不成功答案

【问题标题】：Preflight response is not successful预检响应不成功
【发布时间】：2017-03-14 13:29:49
【问题描述】：

我正在开发一个带有 Angular 的 Web 应用程序，它向我的 Azure API 发送请求。 API 受角度保护。当我在浏览器中调用 url 时，我被重定向到 microsoft 登录页面。登录后我回到 API。

现在，我想从我的 Angular 应用向 API 发送请求：

const auth = btoa("[my username]:[my password]");
headers = {"Authorization": "Basic " + auth};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", {headers: headers}).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

我在 azure 门户中将 [webapp name].azurewebsites.net 添加到了我的 CORS。当我执行此操作时，我收到错误：

[错误] 加载资源失败：服务器响应状态为 400（错误请求）

[错误] 加载资源失败：预检响应不成功

[错误] XMLHttpRequest 无法加载http://[webappname].azurewebsites.net/api/contacts

azurewebsites.net/api/contacts。预检响应不成功

知道怎么解决吗？

更新

我用这段代码再次尝试：

const auth = btoa("[my username]:[my password]");
var config = {headers:  {
              'Authorization': 'Basic ' + auth,
              "Origin": "http://[webapp name].azurewebsites.net/api/contacts",
              "Access-Control-Request-Method": "GET",
              "Access-Control-Request-Headers": "X-Custom-Header"
              }
};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", config).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

现在我收到这些错误：

拒绝设置不安全的标头“Origin”

拒绝设置不安全的标头“Access-Control-Request-Method”

拒绝设置不安全的标头“Access-Control-Request-Headers”

对预检请求的响应未通过访问控制检查：请求中不存在“Access-Control-Allow-Origin”标头资源。因此，Origin 'null' 不允许访问。响应有 HTTP 状态码 400

当我删除这些“不安全的标头”时，最后一条错误消息仍然存在。

为什么 Origin 自动为空？

【问题讨论】：

CORS 配置应该在您的后端服务器端设置，这取决于您在后端使用的语言或框架。如有任何进一步的问题，请随时告诉我。

标签： angularjs http azure xmlhttprequest

【解决方案1】：

您应该在 Server/Backend 代码中的 CORS 中添加请求站点 URL 的地址。每种语言或框架可能有自己的添加方式，请尝试在 google 中搜索“[backend language] cors”（例如“C# cors”）。（感谢@Gary Liu - MSFT）

您可以通过检查开发者控制台中的网络选项卡来确认您添加了正确的来源。

首先选择方法OPTIONS的请求

然后验证Access-Control-Allow-Origin 是否与您的Origin 相同

【讨论】：

感谢您的快速答复，lcycool！我的控制台中不存在“Access-Control-Allow-Origin”字段。请求标头中的“Origin”字段为空。所以我做错了什么......
@chocolatecake 嗯，我从来没有在这里看到没有来源的请求......你的调用脚本是本地 html 文件吗？如果是这种情况，请尝试安装 Web 服务器来提供服务（您可以在本地进行，那么来源将是 http://localhost）
哦，你是对的，lcycool！我忘记了 Web 服务...^^ 我在我的 CORS 策略中添加了“localhost:8888”。现在，我收到错误消息：XMLHttpRequest cannot load http://[app name].azurewebsites.net/api/contacts. Redirect from[app name].azurewebsites.net/api/contacts' to 'https://[app name].azurewebsites.net/api/contacts' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. 你知道我是怎么允许的吗？
我没有使用任何预检请求和重定向，所以我不确定。在 google 上快速搜索显示，此用例可能以前没有被考虑过，因此浏览器尚未正确处理 stackoverflow.com/questions/34949492/…
当我使用open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir 调用 Google Chrome 以禁用 CORS 策略时，它会起作用。这不是最好的方法，但我现在得到了数据：D。

【解决方案2】：

改为设置代理怎么样？

proxy.config.json

{
  "/api/contacts" : {
    "target": "http://{{webapp name}}.azurewebsites.net/api/contacts",
    "secure": "false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api/contacts/": ""
    }
  }
}

您可以在https://angular.io/guide/build#proxying-to-a-backend-server找到更多详细信息

【讨论】：