Resolva problemas de domínio cruzado no SpringBoot e Vue respectivamente

1. Por que ocorrem problemas entre domínios

Fora da política de mesma origem do navegador.

A política de mesma origem é uma convenção. É a função de segurança central e mais básica do navegador. Se a política de mesma origem estiver faltando, as funções normais do navegador podem ser afetadas. Pode-se dizer que a web é construída com base na política de mesma origem, e o navegador é apenas uma implementação da política de mesma origem. A política de mesma origem evita que os scripts JavaScript de um domínio interajam com o conteúdo de outro domínio. A chamada homologia (ou seja, no mesmo domínio) significa que duas páginas têm o mesmo protocolo, host e porta de número de porta.

2. Quando qualquer um dos protocolo, nome de domínio e porta de um url de solicitação for diferente do url da página atual, é um domínio cruzado

URL da página atual	URL da página solicitada	Domínio cruzado	o motivo
http://www.test.com/	http://www.test.com/index.html	não	Mesma fonte (mesmo protocolo, nome de domínio e número de porta)
http://www.test.com/	https://www.test.com/index.html	Domínio cruzado	Protocolos diferentes (http / https)
http://www.test.com/	http://www.baidu.com/	Domínio cruzado	O nome de domínio principal é diferente (teste / baidu)
http://www.test.com/	http://blog.test.com/	Domínio cruzado	Diferentes subdomínios (www / blog)
http://www.test.com:8080/	http://www.test.com:7001/	Domínio cruzado	O número da porta é diferente (8080/7001)

Três, restrição não homóloga

1. Incapaz de ler cookies, localstorage e indexedDB de páginas da web que não sejam da mesma origem
2. Não é possível acessar o DOM de páginas da web que não sejam da mesma origem
3. Não é possível enviar solicitação AJAX para endereço de origem diferente
4. Incapaz de fazer a chamada da interface do controlador

Quatro, cinco maneiras de resolver problemas entre domínios

1. @Configuration no SpringBoot resolve vários domínios (recomendado)

import org.springframework.context.annotation.Bean;  
import org.springframework.context.annotation.Configuration;  
import org.springframework.web.cors.CorsConfiguration;  
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;  
import org.springframework.web.filter.CorsFilter;  
  
@Configuration  
public class CorsConfig {
    @Bean  
    public CorsFilter corsFilter() {  
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        source.registerCorsConfiguration("/**", buildConfig()); 
        return new CorsFilter(source);  
    }  
    
   private CorsConfiguration buildConfig() {  
        CorsConfiguration corsConfiguration = new CorsConfiguration();  
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*"); 
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*"); 
         // 3允许任何方法（post、get等） 
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;  
    }  
}

2. Filtro de escrita à mão

package com.ninesword.utils;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

@Component
public class CrossFilter implements Filter {
    private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        logger.debug("跨域请求进来了。。。");
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        httpServletRequest.getSession();
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Content-type", "application/json");
        httpResponse.setHeader("Cache-Control", "no-cache, must-revalidate");
        chain.doFilter(request, httpResponse);
    }
}

Configure filtros e interfaces a serem filtrados em web.xml

<!-- 添加过滤器过滤跨域请求 -->
 <filter>
   <filter-name>cors</filter-name>
   <!-- 这里配置上面刚刚设置的java过滤器文件 -->
   <filter-class>com.ninesword.utils.CrossFilter</filter-class>
 </filter>
 <filter-mapping>
   <filter-name>cors</filter-name>
   <!-- 这里配置你需要进行跨域的接口，*代表jsForSdp当前路径下所子有路径 -->
   <url-pattern>/jsForSdp/*</url-pattern>
 </filter-mapping>

Após a configuração acima, você pode cruzar domínios com êxito.

3. Use o interceptor Spring para resolver problemas entre domínios

package com.test.test.conf;

import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.annotation.Annotation;

//拦截器添加跨域支持（如果是web.xml配置拦截器，请将@component删除）
@Component
public class CORSFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

Em web.xml

<!--解决跨域访问-->
<filter>
    <filter-name>crossorigin</filter-name>
    <filter-class>com.test.test.crossorigin</filter-class>
</filter>
<filter-mapping>
    <filter-name>crossorigin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

4. Implementação JSONP (aplicável apenas a solicitações GET, não recomendado, consulte a solução entre domínios nos seis front-end para obter detalhes)

5. Implementação de anotação

(1) Desde Spring MVC 4.2, o suporte para acesso entre domínios foi adicionado.

Adicione anotações @CrossOrigin a métodos ou classes.

Os 2 parâmetros em @CrossOrigin:

1. origens: lista de domínios que podem ser acessados
2.  maxAge: A idade máxima (em segundos) da duração do cache da resposta antes do voo.

(2) As regras personalizadas oferecem suporte ao acesso global entre domínios

Configure o caminho de mapeamento no arquivo spring-mvc.xml da seguinte maneira:

<mvc:cors>  
    <mvc:mapping path="/cross/*"/>  
</mvc:cors> 

Se todos os métodos de todo o projeto estiverem acessíveis, você pode configurá-lo assim

<mvc:cors>    
    <mvc:mapping path="/**"/>    
</mvc:cors> 

Onde * significa corresponder à próxima camada

** significa que não importa quantas camadas haja, ela pode ser combinada.

6, implementação do nginx

V. Soluções entre domínios no front end

1. Defina document.domain para resolver o problema de não ser capaz de ler cookies de páginas da web que não sejam da mesma fonte

 Como o navegador verifica se duas páginas da web são da mesma origem por meio da propriedade document.domain, as duas páginas da web podem compartilhar cookies, desde que o mesmo document.domain esteja definido (este esquema é limitado a vários domínios com o mesmo domínio principal e subdomínios diferentes Cenários de aplicativos.)

// 两个页面都设置
document.domain = 'test.com';

2. API de comunicação entre documentos: window.postMessage ()

Chame o método postMessage para implementar a janela pai http://test1.com para enviar uma mensagem para a janela filho http://test2.com (a janela filho também pode enviar mensagens para a janela pai por meio deste método)

Pode ser usado para resolver os seguintes problemas:

1. Transferência de dados entre páginas e novas janelas abertas
2. Mensagem passando entre várias janelas
3. Mensagem de página e iframe aninhado
4. Transferência de dados entre domínios nos três cenários acima

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
 
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

Chame o evento de mensagem para monitorar a mensagem enviada pela outra parte

// 监听 message 消息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 发送消息的窗口
  console.log(e.origin); // e.origin 消息发向的网址
  console.log(e.data);   // e.data   发送的消息
},false);

3 、 JSONP

JSONP é um método comum para comunicação de origem cruzada entre servidor e cliente.

O maior recurso é a simplicidade e boa compatibilidade. A desvantagem é que ele só oferece suporte a solicitações de obtenção, não a solicitações de postagem.

A ideia central: a página da web solicita dados JSON do servidor adicionando um elemento <script>. Depois de receber a solicitação, o servidor envia os dados de volta na posição de parâmetro de uma função de retorno de chamada com um nome especificado.

① Implementação nativa

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

②jQuery ajax

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

③Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

4 、 CORS

CORS é a abreviação de compartilhamento de recursos entre domínios. É um padrão W3C e uma solução fundamental para solicitações AJAX de origem cruzada.

1. Solicitação comum de domínio cruzado: só precisa definir Access-Control-Allow-Origin no lado do servidor
2. Solicitação de vários domínios com cookie: front-ends e back-ends precisam ser definidos

[Configurações de front-end] Determine se há um cookie de acordo com o campo xhr.withCredentials

(1) AJAX nativo

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

②jQuery ajax 

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});

③vue-resource

Vue.http.options.credentials = true

④ axios 

axios.defaults.withCredentials = true

[Configurações do servidor]

O servidor suporta CORS principalmente configurando Access-Control-Allow-Origin. Se o navegador detectar as configurações correspondentes, ele pode permitir que o ajax conduza o acesso entre domínios.

① Fundo Java

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
 
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
 
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
 
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

② Plano de fundo do Nodejs

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var postData = '';
 
    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
 
    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);
 
        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });
 
        res.write(JSON.stringify(postData));
        res.end();
    });
});
 
server.listen('8080');
console.log('Server is running at port 8080...');

③ O Apache precisa usar o módulo mod_headers para ativar as configurações do cabeçalho HTTP, que é ativado por padrão. Você só precisa adicionar o seguinte conteúdo à configuração de <Directory>, <Location>, <Files> ou <VirtualHost> no arquivo de configuração do Apache

Header set Access-Control-Allow-Origin *

 

Anterior: Resumo do conhecimento básico de Java (absolutamente clássico)

Próximo: [Resumo da estrutura Java mais completa na pilha completa] SSH, SSM, Springboot