O que é domínio cruzado e como resolver problemas de domínio cruzado

o que é domínio cruzado

No desenvolvimento do campo da web, os modos de separação front-end e back-end são frequentemente usados. Neste modo, o front-end e o back-end são aplicações web independentes, por exemplo: o back-end é um programa Java e o front-end é uma aplicação React ou Vue.

Quando aplicativos da web independentes acessam uns aos outros, é provável que existam problemas entre domínios.

Geralmente, existem duas maneiras de resolver problemas entre domínios e como resolvê-los com nginx

1. O CORS
define o cabeçalho de resposta HTTP no servidor back-end e adiciona o nome de domínio necessário para permitir o acesso ao Access-Control-Allow-Origin.

2. jsonp
usa o backend para construir dados json de acordo com a solicitação e os retorna, e o frontend usa jsonp para domínio cruzado.

Essas duas abordagens não são discutidas neste artigo.

Deve-se notar que o nginx também fornece uma solução entre domínios baseada na primeira ideia.

Exemplo: o site www.helloworld.com é composto por um aplicativo front-end e um aplicativo back-end. O número da porta front-end é 9000 e o número da porta back-end é 8080.

Se o front-end e o back-end interagirem usando http, a solicitação será rejeitada devido a problemas entre domínios. Vamos ver como o nginx resolve isso:

Primeiro, defina cors no arquivo enable-cors.conf:

permitir lista de origem

set $ACAO ‘*’;

definir origem única

if ( $htp\_{}_{}entrar\_\_\_\ast (www.helowould.com)\left)\right\{set$ $ ACAO$\$$$http\_origin$$;$$\_$$\_$}

if ( erro de análise KaTeX: esperado '}', obteve 'EOF' no final da entrada:…Allow-Origin' " http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow -Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since, Cache-Control,Content-Type';
}

if ($request_method = 'OPÇÕES') { set cors " cors "
$cors"$ {cors}opções";
}

if ($request_method = 'GET') { set cors " cors "
$cors"$ {cors}obter";
}

if ($request_method = 'POST') { set cors " cors "
$cors"$ {cors}post";
}
Em seguida, inclua enable-cors.conf em seu servidor para introduzir a configuração entre domínios:

-------------------------------------------------- --

Este arquivo é um fragmento de configuração do projeto nginx

Você pode incluir diretamente na configuração do nginx (recomendado)

Ou copie para o nginx existente e configure você mesmo

O nome de domínio www.helloworld.com precisa ser configurado com hosts DNS

Entre eles, a API habilitou o cors, que precisa cooperar com outro arquivo de configuração neste diretório

-------------------------------------------------- --

front_server upstream{ servidor www.helloworld.com:9000; } upstream api_server{ servidor www.helloworld.com:8080; }

servidor { ouvir 80; nome_do_servidor www.helloworld.com;

localização ~ ^/api/ { include enable-cors.conf; proxy_pass http://api_server; reescrever “^/api/(.*)$” /$1 break; }

location ~ ^/ { proxy_pass http://front_server; } } Aqui está feito.