Vários tutoriais de domínio cruzado, várias práticas e várias perguntas e respostas online. Além do JSONP simples, muitas pessoas dizem que os CORS não estão funcionando e sempre não têm uma ou duas configurações -chave. Este artigo quer apenas resolver o problema, e todo o código foi praticado por você mesmo.
Este artigo resolve problemas como get, post, dados e cookies em domínio cruzado.
Este artigo falará apenas sobre solicitações e solicitações de postagem. Os leitores devem entender as solicitações de postagem como todos os outros métodos de solicitação, exceto obter solicitações.
JSONP
O JSONP usa o princípio de que o navegador não possui restrições homológicas nas referências de recursos de script e insere dinamicamente uma tag de script e será executado imediatamente após o carregamento do recurso na página. O JSONP é um protocolo de transmissão informal. Um dos pontos -chave desse protocolo é permitir que os usuários passem um retorno de chamada ou definam um método de retorno de chamada no início, e os parâmetros são fornecidos ao servidor. Quando o servidor retornar dados, o parâmetro de retorno de chamada será usado como um nome de função para envolver os dados JSON, para que o cliente possa personalizar suas próprias funções para processar automaticamente os dados de retorno.
O JSONP suporta apenas solicitações, mas não outros tipos de solicitações HTTP, como POST. Ele suporta apenas solicitações HTTP de domínio cruzado. Ele não pode resolver o problema de como fazer chamadas de JavaScript entre duas páginas em diferentes domínios. A vantagem do JSONP é que ele suporta navegadores à moda antiga e as desvantagens também são óbvias: requer a personalização do cliente e do servidor para desenvolvimento. Os dados retornados pelo servidor não podem ser dados JSON padrão, mas os dados embrulhados por retorno de chamada.
O princípio do JSONP é muito simples e usa a idéia de [não há problema de domínio cruzado quando o front-end solicita recursos estáticos].
Mas ele suporta apenas o GET, apenas suportes get, apenas suportes recebem.
Observe que, como esse método é chamado de JSONP, os dados de back -end devem usar dados JSON. Você não pode fazer uma string ou algo casualmente, caso contrário, encontrará o resultado inexplicável.
Método de redação do jQuery front-end
$ .ajax ({type: "get", url: baseurl + "/jsonp/get", datatype: "jsonp", sucesso: function (resposta) {$ ("#resposta"). val (json.stringify (resposta));}});Datatype: "JSONP". Exceto por isso, outras configurações são as mesmas das solicitações normais.
Configuração do back -end Springmvc
Se você também usar o SpringMVC, configure um conselho JSONP, para que todo método do controlador que escrevemos não precise considerar se o cliente está solicitando o JSONP e a primavera o lidará automaticamente de acordo.
@ControllerAdvicePublic Classe jsonpadvice estende abstrateJSONPRESPONSOBODODVICE {public jsonpadvice () {// dessa maneira, se a solicitação contiver o parâmetro de retorno de chamada, a primavera saberá que este é um JSONP SUPER ("retorno de chamada"); }}O método de escrita acima exige que a versão Springmvc não seja inferior a 3,2, e só posso dizer que você deve atualizar.
Configuração de back-end não-springmvc
Quando comecei a trabalhar, o Struts2 ainda era popular. Depois de alguns anos, o SpringMVC basicamente dominou o mercado doméstico.
Seja preguiçoso, aqui está um pseudo-código e clique no método WRAP antes que nosso método retorne ao front-end:
@ControllerAdvicePublic Classe jsonpadvice estende abstrateJSONPRESPONSOBODODVICE {public jsonpadvice () {// dessa maneira, se a solicitação contiver o parâmetro de retorno de chamada, a primavera saberá que este é um JSONP SUPER ("retorno de chamada"); }}Cors
Compartilhamento de Recursos Cross-Origin
A CORS é uma maneira de os navegadores modernos suportarem solicitações de recursos entre domínios. O nome completo é "Cross-OriginResourCesharing". Ao enviar uma solicitação usando o XMLHTTPREQUEST, o navegador constata que a solicitação não cumpre a política da mesma origem e adicionará um cabeçalho de solicitação à solicitação: Origin. O plano de fundo executa uma série de processamento. Se estiver determinado a aceitar a solicitação, um cabeçalho de resposta será adicionado ao resultado de retorno: acesso a acesso-controle-alloguin; O navegador determina se o cabeçalho correspondente contém o valor de origem. Se houver, o navegador processará a resposta e podemos obter os dados de resposta. Se o navegador não incluir o navegador, não podemos obter os dados de resposta.
CORS e JSONP usam o mesmo objetivo, mas é mais poderoso que o JSONP. O CORS suporta todos os tipos de solicitação do navegador e a quantidade de dados solicitados é maior e mais aberta e concisa. O servidor precisa apenas retornar os dados processados diretamente e não há necessidade de processamento especial.
Afinal, o JSONP suporta apenas solicitações, que definitivamente não podem atender a todas as nossas necessidades de solicitação; portanto, os CORS precisam ser movidos.
Os desenvolvedores domésticos da Web ainda são bastante difíceis. Os usuários não atualizam seus navegadores, e o chefe ainda deseja que os desenvolvedores sejam compatíveis.
O CORS suporta os seguintes navegadores. Atualmente, os problemas do navegador estão se tornando cada vez menos importantes, e até o Taobao não suporta IE7 ~~~
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
Método de redação do jQuery front-end
Basta olhar para o código:
$ .ajax ({type: "post", url: baseurl + "/jsonp/post", datatype: 'json', crossDormain: true, xhrfields: {withcredentials: true}, dados: {name: name_from_frontend "}, succurn: function (resposta) {console.lg.lg (name_from_frontend"/}, success: function (resposta) {(consol $ ("#resposta"). Val (JSON.Stringify (Response));Datatype: "JSON", aqui está JSON, não JSONP, não JSONP, não JSONP.
CrossDormain: True, aqui significa usar solicitações de domínio cruzado
xhrfields: {withcredentials: true}, para que a configuração possa trazer os cookies, caso contrário, não podemos nem manter a sessão e muitas pessoas estão presas aqui. Obviamente, se você não tiver esse requisito, não precisa configurar isso.
Configuração do back -end Springmvc
Para a maioria dos projetos da Web, geralmente existem classes de configuração relacionadas ao MVC, herdadas do WebMVCConfigureRAdapter. Se você também usar o Springmvc 4.2 ou superior, basta adicionar esse método como o seguinte:
@ConfigurationPublic Class WebConfig estende o webmvcConfigureRAdApter {@Override public void AddCorsMappings (Registry do CorsRegistry) {Registry.addmapping ("/**/*"). Permitido ("*"); }}Infelizmente, se você estiver em seu projeto, a versão Springmvc é inferior a 4,2, então você precisa "salvar o país através de curvas":
classe pública CrossDomainfilter se estende uma vez que o FilterInternal (@Override protegiu o void dofilterinternal (solicitação httpServletRequest, httpServletResponse resposta, filtro-filtro/) lança o servletexception, ioexception {Response.addheader ("access-conlowstrin; na resposta.addheader ("Access-Control-Alow-Credenciais", "True"); Response.Addheader ("Access-Control-Alow-Methods", "Get, Post, Put, Exclete"); Response.AddHeader ("Access-Control-Alow-Headers", "Content-Type"); filterChain.dofilter (solicitação, resposta); }}Configure o filtro em web.xml:
<filter> <filter-name>CrossDomainFilter</filter-name> <filter-class>com.javadoop.filters.CrossDomainFilter</filter-class></filter><filter-mapping> <filter-name>CrossDomainFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
Existem muitos projetos que usam Shiro, e você também pode configurar os filtros Shiro, para que não os apresentem aqui.
Observe que estou falando de configurações muito gerais, que podem ser configuradas nessas configurações gerais para a maioria dos projetos. Os leitores devem saber como combinar configurações como "*" no artigo.
Se o leitor descobrir que o navegador solicita que o símbolo '*' não possa ser usado, o leitor poderá obter o referente (request.getheader ("referente") no cabeçalho da solicitação de acordo com o objeto de solicitação no filtro acima e depois definir dinamicamente "acessar-control-aligin":
String referent = request.getheader ("referente"); if (stringutils.isnotblank (referente)) {url url = new url (referente); Origem da string = url.getProtocol () + ": //" + url.gethost (); Response.addheader ("Access-Control-Alow-Origin", Origin);} else {Response.addheader ("Access-Control-Alow-Origin", "*");}Redação não atingida pelo front-end
Os dias em que você come jQuery com um truque desapareceram completamente. Aqui vou falar sobre como resolver o problema do pós-domínio se você não usar o jQuery.
Vamos apresentar um JS nativo:
função createCorsRequest (método, url) {var xhr = novo xmlHttPrequest (); if ("witcredentials" em xhr) {// Se houver o atributo com credenciais, é definitivamente um objeto xmlHttPrequest2. Veja o terceiro parâmetro xhr.open (método, url, true); } else if (typeof xDomainRequest! = "indefinido") {// Este objeto é usado pelo IE para solicitar em domínios xhr = new xDomainRequest (); XHR.OPEN (Método, URL); } else {// se assim for, infelizmente, o navegador não suporta cors xhr = null; } retornar xhr;} var xhr = createCorsRequest ('get', url); if (! xhr) {lança um novo erro ('cors não suportado');}Entre eles, Chrome, Firefox, Opera e Safari, esses navegadores "favoráveis ao programador" usam objetos XMLHTTPREQUEST2. O IE usa XDomainRequest.
Resumir
O exposto acima é sobre resolver rapidamente problemas de solicitação de domínio cruzado: JSONP e CORS. Espero que seja útil para todos. Amigos interessados podem continuar se referindo a outros tópicos relacionados neste site. Se houver alguma falha, deixe uma mensagem para apontá -la!