introdução
Domínio cruzado é uma pergunta que frequentemente faço em entrevistas diárias. Este termo aparece frequentemente no mundo do front-end. O principal motivo é que é devido a restrições de segurança (estratégia do mesmo origem, ou seja, JavaScript ou cookies só podem acessar o conteúdo no mesmo domínio). Como inevitavelmente precisamos executar operações de domínio cruzado durante o desenvolvimento diário do projeto, os recursos de domínio cruzado também são uma das habilidades básicas dos engenheiros de front-end.
Como a maioria das soluções de domínio cruzado, o JSONP também é minha escolha, mas um dia as necessidades de PM foram alteradas e uma determinada função precisa ser alterada para apoiar a postagem, porque a quantidade de dados transmitidos é relativamente grande e o formulário GET não pode ser tratado. Por isso, tenho lutado com os CORS há muito conhecidos (compartilhamento de recursos de origem cruzada), e o artigo aqui está uma breve notação e resumo durante o período de dificuldades.
• O que os CORS podem fazer:
O uso normal do AJAX requer consideração normal de problemas de domínio cruzado, para que grandes programadores também tenham lutado com soluções para problemas de domínio cruzado, como JSONP, Flash, Ifame, Xhr2, etc.
• O princípio dos CORs:
O CORS define um mecanismo para o acesso de domínio cruzado, que permite que o AJAX obtenha acesso ao domínio cruzado. O CORS permite que os aplicativos de rede em um domínio enviem solicitações de Ajax cruzadas para outro domínio. A implementação dessa função é muito simples, basta enviar um cabeçalho de resposta pelo servidor.
Vamos ao tópico abaixo para obter detalhes da seguinte forma:
A solicitação HTTP cruzada refere-se a uma solicitação HTTP na qual o domínio em que o recurso inicia a solicitação está localizado é diferente do domínio em que o recurso inicia a solicitação.
Por exemplo, se eu apresentar os recursos da estação B (www.b.com/images/1.jpg) através da tag <MG> no site A (www.a.com), a estação A iniciará uma solicitação de cross sites à estação B.
São permitidas solicitações de sites cruzados para esse tipo de recurso de imagem e solicitações cruzadas semelhantes incluem arquivos CSS, arquivos JavaScript etc.
No entanto, se uma solicitação HTTP for iniciada em um script, ela será restrita pelo navegador por razões de segurança. Por exemplo, para iniciar solicitações HTTP usando o objeto XMLHTTPREQUEST, você deve cumprir a política da mesma origem.
A chamada "política da mesma origem" significa que um aplicativo da Web pode usar apenas o objeto XMLHTTPREQUEST para iniciar solicitações HTTP no domínio onde está a origem. Esta fonte de solicitação e objeto de solicitação devem estar no mesmo domínio.
Por exemplo, http://www.a.com, o protocolo deste site é http, o nome de domínio é www.a.com e a porta padrão é 80. Então o seguinte é sua situação homóloga:
• http: //www.a.com/index.html HOMOGEN
• https: //www.a.com/a.html fontes diferentes (protocolos diferentes)
• http: //service..com/testservice/test diferentes fontes (nomes de domínio são diferentes)
• http: //www.b.com/index.html fontes diferentes (nomes de domínio são diferentes)
• http: //www.a.com: 8080/index.html fontes diferentes (portas diferentes)
Para desenvolver aplicativos da Web mais poderosos e ricos, as solicitações de domínio cruzado são muito comuns. Então, como você faz solicitações de domínio cruzado sem desistir de segurança?
O W3C recomenda um novo mecanismo, nomeadamente o compartilhamento de recursos de origem cruzada (CORS).
O compartilhamento de recursos de origem cruzada (CORS) garante a segurança das solicitações por meio da declaração colaborativa do cliente + servidor. O servidor adicionará uma série de parâmetros de solicitação HTTP (como o Access-Control-Alow-Origin, etc.) ao cabeçalho da solicitação HTTP para limitar quais solicitações de domínio e quais tipos de solicitação são aceitáveis. O cliente deve declarar sua própria fonte (orgin) ao iniciar uma solicitação, caso contrário, o servidor não a processará. Se o cliente não declarar, a solicitação será interceptada diretamente pelo navegador e não poderá chegar ao servidor. Depois de receber a solicitação HTTP, o servidor comparará os domínios e apenas solicitações do mesmo domínio serão processadas.
Um exemplo de uso do CORS para implementar solicitações de domínio cruzado:
Cliente:
function gethello () {var xhr = novo xmlHttPrequest (); xhr.open ("post", "http://b.example.com/test.ashx", true); xhr.setRequestHeader ("content-ttype", "Application/x-ww --url-url-selenncoded" // Declare a fonte da solicitação xhr.setRequestHeader ("origem", "http://a.example.com"); xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {var responsext = XHR.RESPONSETEXT; console.info (RespoteText);}} xhr.send ();}Servidor:
Public class Test: ihttphandler {public void processrequest (contexto httpContext) {context.Response.ContentType = "text/plana"; // declara as solicitações de aceitação de todos os domínios. Isreusable {get {return false;}}}Ativar acesso cruzado na API da web
A CORS é uma declaração de colaboração do lado do servidor e do cliente para garantir a segurança das solicitações. Portanto, se você precisar ativar os CORs na API da Web, também precisará configurá -la de acordo. Felizmente, a equipe do ASP.NET da Microsoft fornece uma solução oficial de domínio entre domínios, que só precisa ser adicionado no NUGET.
Em seguida, use a seguinte configuração em app_start/webapiconfig.cs para obter acesso ao domínio cruzado:
Classe estática pública webapiconfig {public static void Register (httpconfiguration config) {// Configuração e Serviços da API da Web // Configure a API da Web para usar apenas a autenticação do portador de token. config.suppressdefaulthostauthentication (); config.filters.add (novo HostauthenticationFilter (oauthdefaults.authenticationType); // roteamento da web de roteamento de web.MaphTtpattroutous (); "API/{Controller}/{id}", padrões: new {id = routeParameter.optional}); // Permite API da web de acesso cruzado de acesso ao limite) void enableCrossSiteReQuests (httpconfiguration config) {var cors = new EnableCorsattribute (Origins: "*", cabeçalhos: "*", métodos: "*"); config.enableCors (cors);}}}Como os navegadores abaixo do IE10 não suportam CORS, o CORS não é uma solução de domínio cruzado na China atualmente. No entanto, com o lançamento do Windows 10 e o declínio gradual do IE, pode ser previsível que os CORS se tornem uma solução padrão de domínio cruzado em um futuro próximo.
O exposto acima é a solução de domínio cruzado JS introduzido pelo editor para você. Espero que seja útil para você!