Vue JS axios HTTP500 内部服务器答案

【问题标题】：Vue JS axios HTTP500 Internal ServerVue JS axios HTTP500 内部服务器
【发布时间】：2020-03-24 14:11:58
【问题描述】：

我创建了一个 Asp.Net Core Web API 并使用邮递员检查了它是否正常工作。我已经从这个博客下载了 GitHub 项目：https://paweljw.github.io/2017/09/vue.js-front-end-app-part-3-authentication/ 我已将 src/backend/vue-axios/axios.js 中的 url 修改为我的 web api url 不管我做什么，我得到的是： HTTP500: SERVER ERROR - 服务器遇到了阻止它完成请求的意外情况。 (XHR)选项 - http://localhost:61783/api/token

我在 Web API Token 方法上设置了一个断点，但它永远不会被命中。

关于如何解决这个问题的任何想法？

【问题讨论】：

请求方法错误？请显示更多代码 =)
请显示 axios 代码。
我认为您正在尝试提出跨源请求。当您发出跨域请求时，例如：GET /token 如果您的浏览器检测到 API 服务器与为网站提供服务的服务器不同，它首先向 API 服务器发出 OPTIONS /token。因此，您需要在服务器中添加代码以正确响应 OPTIONS 请求 - 之后，如果 OPTIONS 请求有效，浏览器将发出实际请求 GET /token。更多信息：enable-cors.org 和 enable-cors.org/server_aspnet.html。还有很多关于这个的问题：搜索“CORS”
注意：您在使用 postman 时可能看不到此问题，因为它不执行 CORS 检查浏览器是否执行此操作，因此它直接调用 GET /token 而不必调用 OPTIONS /token 这不是由您的服务器处理。
CORS 不是问题，因为您会遇到不同类型的错误。我还在 Web API 项目中启用了 CORS。

标签： vue.js axios asp.net-core-webapi

【解决方案1】：

终于破解了，一直都是CORS！

services.AddCors(options =>
        {
            options.AddPolicy("AllowAllHeaders",
                  corsbuilder =>
                  {
                      corsbuilder.AllowAnyOrigin()
                                 .AllowAnyHeader()
                                 .AllowAnyMethod()
                                 .WithOrigins("http://localhost:8080");   
                  });
        });

WithOrigins 帮助

并使用控制器上的策略启用 cors [EnableCors("AllowAllHeaders")]

【讨论】：