c# - 如何解决对 XMLHttpRequest 的访问已被 CORS 策略阻止？
问题描述
这个问题是西班牙语原文，我用谷歌翻译在这里发布了同样的问题，如果语法不是最好的，我真的很抱歉，我做了更好的工作来在这里翻译完整的问题。 谢谢！
大家，早安
我在 C# 中有一个 Rest API，我在那个 API 中有几个 GET 和 POST 方法，我尝试了使用 Postman 的所有方法，它们运行良好，它们都给了我期望的答案，当我尝试时问题出现了为了从我的前面使用它们，我尝试使用 Axios 和 Ajax，每个人都抛出以下异常：
• Axios
• jQuery Ajax：
我设法让这个错误更准确哈哈：
我认为它可能是第一个，因为 API 在 https 而我的前面在 http，所以我将两者都放在 https 和 http 中，但这并没有解决它。
我的消费方式如下：
• Axios：
let url = this.apiSeguridad + "usuario/";
let data = {
Nit_ID: this.userInfo.nit_ID.ID,
UserName: this.userInfo.userName.ID,
Password: btoa(this.password),
Public_IP: this.publicIP,
Private_IP: this.localIP
};
console.log(url, data);
let resultApi = await axios.post(url, data);
我还尝试使用以下代码：
let url = this.apiSeguridad + "usuario/";
let config = {
headers: {
"Content-Type": "application/json",
"cache-control": "no-cache"
}
};
let data = JSON.stringify({
Nit_ID: this.userInfo.nit_ID.ID,
UserName: this.userInfo.userName.ID,
Password: btoa(this.password),
Public_IP: this.publicIP,
Private_IP: this.localIP
});
console.log(url, data);
let resultApi = await axios.post(url, data,config);
它没有成功。
在 Ajax 中，我尝试了类似的方式，但更多的是验证请求是否有效但抛出相同的错误，我有兴趣让它在 axios 中工作。
GET 请求完美运行，我只收到 POST 请求中的错误。
我在 web.config 上的 API 配置是这样的：
我想使用的 POST 方法是这样的：
好吧，现在，我认为问题可能出JWT在我的 API 中，并在以下代码中添加了这行代码WebApiConfig.cs：
我应该验证对我拥有该属性的方法的所有请求的标头[Authorize]
为了实现 JWT，我使用了这个网站，这就是我添加并添加那行代码的地方。
我希望您的帮助能够解决它，我不知道它是否是 API 配置或我如何从 axios 使用 API 或什么。
邮递员的应用程序可以正常工作并按照我的意愿回答我，这是一个示例：
我没有在该请求中添加任何其他内容。
感谢 Miguel Zarate 的请求（在原始西班牙语帖子中）使用 Fiddler4 来验证请求，这就是该工具向我展示的内容：
• 来自邮递员：
• 从前面：
这似乎是结果之间最明显的区别：
• 邮递员：
• 正面：
有趣的是，当我从 web.config 中删除标头<add name =" Access-Control-Allow-Origin "value =" * "/>时，邮递员继续发出请求而没有问题，但是从我的前面我不能发出任何 GET 请求，直到我再次放置它，但失败继续POST 请求。
来自 Google Chrome 控制台的 CURL：
• 命令：
curl "https://localhost:44377/api/usuario/" -H "Accept: application/json, text/plain, */*" -H "cache-control: no-cache" -H "DNT: 1" -H "Referer: http://localhost:8080/" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36" -H "Sec-Fetch-Mode: cors" -H "Content-Type: application/json" --data-binary "^{^\^"Nit_ID^\^":^\^"899999284^\^",^\^"UserName^\^":^\^"sasfdm^\^",^\^"Password^\^":^\^"NDU0NjU0NjU0^\^",^\^"Public_IP^\^":^\^"181.49.144.244^\^",^\^"Private_IP^\^":^\^"192.168.253.102^\^"^}" --compressed
• 重击：
curl 'https://localhost:44377/api/usuario/' -H 'Accept: application/json, text/plain, */*' -H 'cache-control: no-cache' -H 'DNT: 1' -H 'Referer: http://localhost:8080/' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36' -H 'Sec-Fetch-Mode: cors' -H 'Content-Type: application/json' --data-binary '{"Nit_ID":"899999284","UserName":"sasfdm","Password":"NDU0NjU0NjU0","Public_IP":"181.49.144.244","Private_IP":"192.168.253.102"}' --compressed
• CMD：全部：
curl "https://localhost:44377/api/usuario/1032494911" -H "Accept: application/json, text/plain, */*" -H "Referer: http://localhost:8080/" -H "DNT: 1" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36" -H "Sec-Fetch-Mode: cors" --compressed &
curl "https://localhost:44377/api/usuario/tipodocumento/899999284/1032494911" -H "Accept: application/json, text/plain, */*" -H "Referer: http://localhost:8080/" -H "DNT: 1" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36" -H "Sec-Fetch-Mode: cors" --compressed &
curl "https://localhost:44377/api/usuario/" -H "Accept: application/json, text/plain, */*" -H "cache-control: no-cache" -H "DNT: 1" -H "Referer: http://localhost:8080/" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36" -H "Sec-Fetch-Mode: cors" -H "Content-Type: application/json" --data-binary "^{^\^"Nit_ID^\^":^\^"899999284^\^",^\^"UserName^\^":^\^"sasfdm^\^",^\^"Password^\^":^\^"MTIzNDU2Nzg5^\^",^\^"Public_IP^\^":^\^"181.49.144.244^\^",^\^"Private_IP^\^":^\^"192.168.253.102^\^"^}" --compressed
• 抨击所有：
curl 'https://localhost:44377/api/usuario/1032494911' -H 'Accept: application/json, text/plain, */*' -H 'Referer: http://localhost:8080/' -H 'DNT: 1' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36' -H 'Sec-Fetch-Mode: cors' --compressed ;
curl 'https://localhost:44377/api/usuario/tipodocumento/899999284/1032494911' -H 'Accept: application/json, text/plain, */*' -H 'Referer: http://localhost:8080/' -H 'DNT: 1' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36' -H 'Sec-Fetch-Mode: cors' --compressed ;
curl 'https://localhost:44377/api/usuario/' -H 'Accept: application/json, text/plain, */*' -H 'cache-control: no-cache' -H 'DNT: 1' -H 'Referer: http://localhost:8080/' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36' -H 'Sec-Fetch-Mode: cors' -H 'Content-Type: application/json' --data-binary '{"Nit_ID":"899999284","UserName":"sasfdm","Password":"MTIzNDU2Nzg5","Public_IP":"181.49.144.244","Private_IP":"192.168.253.102"}' --compressed
错误在于如何正确地将 DATA 发送到 POST 方法，因为如果创建了不允许数据的 POST 方法没有问题，它消耗的东西没有问题，当它接收到参数时它没有，那我该怎么做正确发送那些？Axios 的数据？
当我没有像[FromBody] InfoEntryValidateUserClass data命令一样将参数放入 API 时let resultApi = await axios.post (url);。
如果我[FromBody] InfoEntryValidateUserClass data在 API 中添加作为参数并使用JSON.stringify ({...})我在发送的数据中收到null的数据发送数据，但如果我不使用它，则会再次出现错误Access to XMLHttpRequest at 'https: // localhost: 44377 / api / user /' from origin 'http: // localhost: 8080' has been blocked by CORS policy。
错误在于如何发送 API 正在等待的数据，我指的类是这样的：
public class InfoEntryValidateUsuarioClass
{
public string Nit_ID { get; set; }
public string UserName { get; set; }
public string Password { get; set; }
public string Public_IP { get; set; }
public string Private_IP { get; set; }
}
我正在发送这样的数据：
let data = JSON.stringify({
Nit_ID: this.userInfo.nit_ID.ID,
UserName: this.userInfo.userName.ID,
Password: btoa(this.password),
Public_IP: this.publicIP,
Private_IP: this.localIP
});
解决方案
在验证了几件事后，在打开的聊天中很多人的帮助下，我们发现解决方案是在一个 web.config 和 CORS 配置中直接在 API 中。
以下内容被添加到 web.config 中：
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
<add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
</customHeaders>
</httpProtocol>
</system.webServer>
并在WebApiConfig.cs文件中添加了包
using System.Web.Http.Cors;
为了增加 CORS 的安全性，放在那里的是：
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Configuración y servicios de API web
//Configuración para verificar la seguridad del CORS
var corsAttr = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(corsAttr);
// Rutas de API web
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
Axios 应用程序的整个问题，包括 GET 和 POST，都已经奏效了。
当我只需要在 POST 中发送数据时，我这样做了：
let data = {
Nit_ID: this.userInfo.nit_ID.ID,
UserName: this.userInfo.userName.ID,
Password: btoa(this.password),
Public_IP: this.publicIP,
Private_IP: this.localIP
};
//Verificamos los datos del usuario
let resultApi = await axios.post(
"https://localhost:44377/api/usuario",
data
);
let result = resultApi.data;
要在带有轴的标题中发送数据，我这样做如下：
let data = {
Nit_ID: this.userInfo.nit_ID.ID,
UserName: this.userInfo.userName.ID,
Code: this.verificationCode
};
console.log(localStorage.getItem("DoubleFactorToken"));
let headers = {
Authorization: localStorage.getItem("DoubleFactorToken")
};
let resultApi = await axios.post(
"https://localhost:44377/api/usuario/verifydoublefactorcode",
data,
{ headers: headers }
);
console.log(resultApi.data);
非常感谢所有花时间合作的人。
推荐阅读
- amazon-s3 - 如何授予 lambda 权限以将文件上传到 `terraform` 中的 s3 存储桶？
- jquery - 如何在文件转换时使用 ajax 制作加载器
- android - 根据放置在相机上的视图裁剪图像的特定部分
- regex - 正则表达式函数说明
- android - 我们如何在 onTouch 事件中将带有 drawRect() 的框限制为 Square
- android - 有没有办法在没有预定义属性的情况下手动创建应用程序主题？
- updates - toc.update 是否还包括 toc.updatepagenumbers？
- python - 如何修复/优化带有大量噪音的文档检测
- android - 更新android studio后应用程序未安装在设备上
- java - 如何使用spring data mongorepository对嵌入数组进行排序和限制