Agora, vamos discutir as questões relacionadas dos dados de solicitação de domínio cruzado do navegador. Pode não ser muito padrão dizer que isso ocorre porque a rejeição de dados de solicitação de domínio cruzado não é exclusivo do navegador. A razão pela qual os domínios não podem solicitar dados é porque os navegadores implementam basicamente uma especificação de segurança chamada "política da mesma origem". Qual é a especificação específica? Encontramos um perfil no MDN com o seguinte endereço:
Explicação da política homóloga ao navegador
Em geral, quando o URL A e o URL B diferem em termos de protocolo, porta e nome de domínio, o navegador iniciará uma política da mesma origem e recusará solicitações de dados entre os servidores A e B.
Ao falar sobre a estratégia do mesmo origem, o conhecimento que você obtém é superficial. Você deve praticar você mesmo. Como a estratégia do mesmo origem é refletida? Abaixo, demonstrarei passo a passo em combinação com o código.
1. Servidor A não pode solicitar servidor B
Como é um domínio cruzado, assumirei que tenho dois nomes de domínio, a saber, um e localhost. A significa que o editor hospeda o nome de domínio na nuvem Alibaba. Localhost, como o nome sugere, é minha máquina de desenvolvimento. Imaginamos um cenário em que implantamos um arquivo index.html no localhost, um serviço de back-end de primavera simples no servidor A, e fornecemos uma interface simples para expor-a à chamada de arquivo index.html. Finalmente, o navegador solicita o arquivo index.html do localhost e veja o que o navegador solicita?
index.html
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8"/></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $ (document) .ready (function () {$ .ajax ({type: "get", assíncrono: true, url: "http: //a/hello/map/getuser.json", // solicitar o tipo de interface no servidor A: "json", success: function) e dados; </script> <h2> Olá mundo </h2> </body> </html>Solicite o arquivo index.html no navegador e é exibido da seguinte forma:
Pode-se descobrir que a solicitação foi rejeitada pelo navegador, levando-nos a não permitir solicitações de domínio cruzado. É muito desconfortável. Como resolvê -lo?
2. Use JSONP para resolver solicitações de domínio cruzado
Primeiro, vamos falar sobre o princípio. O JSONP resolve problemas de domínio cruzado utiliza principalmente a domainabilidade cruzada da tag <Script>, ou seja, o recurso que o endereço do link no atributo SRC pode ser acessado entre domínios, porque geralmente definimos o valor do atributo SRC para o endereço do CDN e a biblioteca JS relevante foi carregada.
index.html
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8" /></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $ (document) .ready (function () {$ .ajax ({type: "get", assíncrono: true, jsonp: "callbackname", // interface de back -end name jsonpcallback: "calllofunction", // função de retorno de chamada url: "http: //ape/hello/map/getUser.getUser.TTP", //apatunction ", // // Nome da função de reclinga:" http: //ape/hello/map/getUsher.getUser.njson, "http: //ane/hello/map/getUser.json," http: //ane/hello/map/getUsher.getUser.TTP: " JSONP Sucesso: função (dados) {console.log ("Sucesso"); </script> <script type = "text/javascript"> var callbackfunction = function (data) {alert ('Os dados retornados pela interface são:' + json.stringify (dados)); }; </script> </body> </html>O código da interface no servidor A é:
/** * * A classe JsonbackController. * * Descrição: O controlador retorna uma sequência de dados JSON simples, e os dados JSON são compostos por um objeto de usuário simples * * @Author: huangjiawei * @since: 12 de junho de 2018 * @version: $ revision $ date $ $ $ lastChangedby $ * */ @RestController LoggerFactory.getLogger (jsonbackController.class); / *** Resolva os dados de solicitação de domínio cruzado* @param Response* @param chama de chamado Nome da função de retorno de chamada front-end-final* @return*/ @requestMapping (value = "getUser.json") public void getUser (httpServletResponse Response, @ReQuestParam StringName) {User = User = User = User = UserTeRSponse Response, HuMestparam StringName) {User = User = User = User = UserTeStleSponse Response, HuMQuestparam StringName) {User = User = User = User = User = NEW; Response.setContentType ("Texto/JavaScript"); Escritor escritor = null; tente {writer = Response.getWriter (); writer.write (chamado de chamada + "("); writer.write (user.toString ()); writer.write (");"); } catch (ioexception e) {Logger.error ("JSONP Response Write falhou! Dados:" + user.toString (), e); } finalmente {if (writer! = null) {try {writer.close (); } catch (ioexception e) {Logger.error ("Stream de saída Fechar exceção!", e); } writer = null; }}}}O back -end passa em um nome de função de retorno de chamada de nome de chamada de parâmetro e, em seguida, retorna um pedaço de código JS para o front -end. O formato de código JS é o seguinte:
callbackName + ( data ) + ;
O navegador solicita o arquivo index.html no servidor localhost, e o resultado é o seguinte:
O método acima resolve problemas de domínio cruzado através do JQuery + JSONP. Você não disse que pode usar o atributo SRC da tag <Cript>? Quatro.
index.html no servidor localhost
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8" /></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var callbackFunction = function (dados) {alert ('Os dados retornados pela interface são:' + json.stringify (dados)); }; </script> <script type = "text/javascript" src = "http: //a/hello/map/getuser.json? chamado backname = callbackfunction"> </script> </body> </html>O efeito de exibição do navegador é o mesmo que acima. Mas deve -se notar aqui que o SRC significa introduzir um arquivo JS. Como é chamado diretamente pela interface, e os dados retornados pela interface são uma parte do código JS, ele pode ser executado. Além disso, a ordem da segunda tag <Script> não pode ser revertida, caso contrário, a função de função de chamada não será encontrada.
Endereço do código do projeto: https://github.com/smalmercoder/jsonpdemo
Finalmente, resumiremos que existem muitas soluções para soluções entre domínios, e o JSONP é apenas um deles, e a situação específica precisa ser analisada em detalhes. Espero que este artigo seja útil para você. Obrigado pela leitura. Bem -vindo ao Github para começar, Momo! Eu também espero que todos apoiem mais wulin.com.