Olá meu nome é Mauricio Junior e o hoje eu vou te mostrar sobre CORS. CORS significa (Cross-Origin Requests), isso quer dizer qualquer request precisa ser verificado para consumir a Api que você publicou. É importante verificar e desabilitar os endereços e ter um pouco de segurança para evitar que qualquer chamada de dados seja respondida.
Eu vou mostrar como fazer uma chamada com JQuery para a sua Api.
O C# e Api pode habilitar ou desabilitar as chamadas de forma automática. Para habiltiar e permitir que qualquer chamada seja aceita em sua Api, é necessário adicionar o AlowAnyHeader(), AllowAnyMethod() e AllowAnyOrigin() dentro do ConfigureServices método.
public void ConfigureServices(IServiceCollection services)
{
//add cors
services.AddCors(options =>
{
options.AddPolicy("Policy", builder =>
{
builder
.AllowAnyHeader()
.AllowAnyMethod()
.AllowAnyOrigin();
});
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors("Policy");
}
Código 1.1
Onde está o método ConfigureServices? Está dentro do Startup.cs ou Program.cs dependendo da versão que está utilizando.
Eu tenho uma Api que retorna todos os cursos da plataforma.academy em meu localhost e quando eu tento acessar usando um simples JQuery, o acesso é cortado e para conseguir resolver esse problema, eu tive que permitir o acesso usando o código 1.1.
No código 1.2 eu mostro como fazer a chamada usando JQuery para pegar os dados da Api criada por mim.
<!DOCTYPE html>
<html>
<head>
<title>Courses</title>
<meta charset="utf-8" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "https://localhost:5001/api/course",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
//Clear all previous list of members
$("#Courses").empty();
//Display Asp.Net Web API response in console log
//You can see console log value in developer tool
//by pressing F12 function key.
console.log(response);
// Variable created to store <li>Memeber Detail</li>
var ListValue = "";
//Variable created to iterate the json array values.
var i;
//Generic loop to iterate the response arrays.
for (i = 0; i < response.length; ++i) {
ListValue += "<li>" + response[i].title + " --- " + response[i].courseLink
}
//Add/Append the formatted values of ListValue variable into ID called "Courses"
$("#Courses").append(ListValue);
},
failure: function (response) {
alert(response.responseText);
alert("Failure");
},
error: function (response) {
alert(response);
alert("Error");
}
});
});
</script>
</head>
<body>
<h2>Plataforma.Academy</h2>
<ul id="Courses">
</ul>
</body>
</html>
Código 1.2
No código 1.3 eu mostro o Json que a Api vai retornar mas no momento eu vou usar apenas as propriedades chamadas title e courseLink.
[
{
"title": "string",
"courseLink": "string",
"status": "string",
"imageCourse": "string",
"courseCategoryId": 0,
"courseDescription": "string",
"coursePrice": "string",
"courseOldPrice": "string",
"courseCategoyLink": "string"
}
]
Código 1.3
Sem as propriedades alteradas dentro da configuração da Api, quando o HTML, JavaScript e JQuery tentam acessar o endereço, um erro é retornado para o JavaScript que pode ser visto dentro do log.
[Error] Origin null is not allowed by
Access-Control-Allow-Origin. Status code: 204
[Error] XMLHttpRequest cannot load
https://localhost:5001/api/course due to access control checks.
[Error] Failed to load resource: Origin null is not
allowed by Access-Control-Allow-Origin. Status code: 204 (course, line 0)
Note que as mensagens mostram claramente sobre a permissão de acesso original. Tenha em mente autorizar apenas endereços conhecidos por você ou pelo seu sistema. Para adicionar diferentes endereços no CORS, é necessário fazer conforme o código 1.4.
//add cors
services.AddCors(options =>
{
options.AddPolicy("Policy", builder =>
{
builder.WithOrigins("https://plataforma.academy", "site2", "site3");
});
});
Código 1.4.
Veja o resultado da página HTML consumindo a Api.
Qualquer dúvida pode entrar em contato comigo pelo meu site www.mauriciojunior.net ou pode acessar diretamente os cursos da escola de programação academy Escolha de Programação
