Как решить междоменные проблемы, разделив фронтенд и бэкэнд проекты

Spring Boot

Адрес фактического проекта электронной коммерции SpringBoot (18k+star):GitHub.com/macro-positive/…

Резюме

Междоменное совместное использование ресурсов (CORS) является распространенной проблемой в проектах разделения внешнего и внутреннего интерфейса.В этой статье в основном рассказывается, как решить эту проблему, когда приложение Spring Boot интегрирует Spring Security.

Что такое междоменная проблема

Полное название Cors Cross-Origin Resource Sharing предназначено для совместного использования междоменных ресурсов. Когда ресурс доступен для другого доменного имени или ресурса других портов, будет выдан междоменный запрос. Если другому ресурсу не разрешен доступ к междоменным ресурсам, ресурс, к которому осуществляется доступ, столкнется с междоменными проблемами.

Демонстрация и решение междоменных проблем

Мы используем исходный код проекта торгового центра, чтобы продемонстрировать междоменную проблему. В настоящее время внешний код работает на порту 8090, а внутренний код работает на порту 8080. Поскольку его доменное имя — localhost, но работающие порты внешнего и внутреннего интерфейса несовместимы, когда внешний интерфейс обращается к внутреннему интерфейсу, возникнут междоменные проблемы.

Нажмите кнопку входа в систему

На данный момент обнаруживается междоменная проблема при вызове интерфейса входа в систему.

展示图片
展示图片
展示图片

Переопределите CorsFilter по умолчанию, чтобы решить проблему

Добавьте файл конфигурации GlobalCORSCONFIG, чтобы обеспечить доступ к пересечению домена.

package com.macro.mall.config;

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;

/**
 * 全局跨域配置
 * Created by macro on 2019/7/27.
 */
@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

Повторно запустите код, нажмите кнопку входа

Обнаружено, что запрос OPTIONS интерфейса /admin/info, который требует аутентификации входа, не может пройти аутентификацию, потому что сложный перекрестный запрос требует предварительной проверки запроса OPTIONS.Наше приложение интегрирует SpringSecurity, а запрос OPTIONS не освобождает аутентификацию входа в систему. .

展示图片
展示图片

Установите SpringSecurity, чтобы разрешить доступ к запросу OPTIONS

Добавьте следующий код в метод configure(HttpSecurity httpSecurity) класса SecurityConfig.

.antMatchers(HttpMethod.OPTIONS)//跨域请求会先进行一次options请求
.permitAll()

展示图片

Повторно запустите код, нажмите кнопку входа

Обнаружено, что к нему можно получить доступ в обычном режиме.

展示图片
展示图片

Полный междоменный запрос

Сначала инициируйте запрос OPTIONS для предварительной проверки.

  • Информация заголовка запроса:
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
  • Информация заголовка ответа:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 0
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
  • Запрос выполнен успешно, код возврата — 200.

Сделайте настоящий междоменный запрос

  • Информация заголовка запроса:
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
{username: "admin", password: "123456"}
password: "123456"
username: "admin"
  • Информация заголовка ответа:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=UTF-8
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
  • Запрос выполнен успешно, код возврата — 200.

Адрес исходного кода проекта

GitHub.com/macro-positive/…

публика

проект торгового центраПолный набор учебных пособий сериализуется,Обратите внимание на публичный аккаунтПолучите это прямо сейчас.

公众号图片

Категории