Каталог статей

• Предисловие
• 1. Почему междоменный
  • 1. Что такое источник
  • 2. Структура URL-адреса
  • 3. Одно и то же происхождение, но разное🌰
    • Тот же пример происхождения
    • Нет Тот же пример происхождения
  • 4. Зачем браузеру нужна одна и та же политика происхождения?
  • 5. Регулярные междоменные запросы к интерфейсу
• 2. Фронтальные решения
  • jsonp
  • webpack-dev-server
  • document.domain
• 3. Серверные решения
  • Заголовок CORS HTTP-протокола
  • Настройки SpringCloud междоменные
  • Междоменные настройки Koa
• 4. Решения по эксплуатации и техническому обслуживанию
• 5. Резюме
• Справочная ссылка

Предисловие

Междоменные проблемы всегда были серьезной проблемой для фронтенда. С самого начала фронтенда и до настоящего времени я и мои коллеги вокруг меня, а также друзья в онлайн-фронтенде беспокоились об этом. проблема.

Особенно, когда я недавно написал инкапсуляцию сети, наиболее распространенной проблемой, возникающей у пользователей, является проблема междоменного доступа. Я объяснял это много раз, поэтому я напишу это здесь. Вы можете взглянуть на это и подвести итог, если хотите. забудь об этом в будущем.

Вставьте стандартный отчет о междоменных ошибках внешнего интерфейса (фон SpringBoot):

Access to XMLHttpRequest at '…' from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

1. Почему междоменный

Когда дело доходит до кросс-домена, мы должны говорить о политике одного и того же происхождения браузера. Междоменность также обусловлена ​​механизмом браузера. Существование этого механизма по-прежнему связано с безопасностью.

1. Что такое источник

Происхождение веб-контента определяется схемой (протоколом), хостом (доменным именем) и портом URL-адреса, используемого для доступа к нему. Два объекта имеют одинаковое происхождение, только если схема, хост и порт совпадают.

Вы можете определить, является ли источник тем же или источником: если порт хоста схемы в URL-адресе тот же, это означает, что источник тот же.

Давайте познакомимся с этими тремя частями структуры URL.

2. Структура URL-адреса

URL означает унифицированный указатель ресурсов. URL-адрес — это не что иное, как адрес данного уникального ресурса в сети.

URL-адрес имеет следующую структуру:

• Схема или протокол

• Доменное имя также называется доменным именем хоста.

• порт номер порта

• Параметры Параметры

• Точка привязки, обычно используемая для позиционирования.

3. Одно и то же происхождение, но разное🌰

Приведите пример одного и того же происхождения, но разного происхождения, чтобы облегчить

Тот же пример происхождения

Нет Тот же пример происхождения

4. Зачем браузеру нужна одна и та же политика происхождения?

Политика одного и того же источника — это важная политика безопасности, которая ограничивает взаимодействие документов из одного источника или загруженных им скриптов с ресурсами из другого источника. Это может помочь заблокировать вредоносные документы и уменьшить возможные векторы атак.

5. Регулярные междоменные запросы к интерфейсу

Когда нет разделения фронтенда и бэкэнда, междоменные проблемы часто возникают редко. Потому что передняя и задняя части развернуты вместе. Теперь, когда фронтенд и бэкенд разделены, Vue/react сталкивается с проблемой междоменных запросов.

Ниже приводится изображение, цитируемое из описания официального сайта для пояснения междоменного подхода:

Механизм совместного использования ресурсов между источниками (CORS) позволяет серверам веб-приложений выполнять управление доступом между источниками, чтобы передача данных между источниками могла осуществляться безопасно. Современные браузеры поддерживают использование CORS в контейнерах API (таких как XMLHttpRequest или Fetch) для снижения риска, связанного с HTTP-запросами из разных источников.

2. Фронтальные решения

jsonp

Принцип JSONP очень прост,Просто в HTML-теге,Многие теги с атрибутами src могут запрашивать контент из разных доменов.,Например, мы знакомы сimgТеги изображений。Та же причина,Тег script также можно использовать,Вы можете использовать теги скриптов для выполнения междоменного кода JavaScript. через эти коды,Мы можем реализовать данные внешнего междоменного запроса.

jsonp может решать междоменные проблемы на стороне интерфейса, но только для запросов get. Метод реализации может ссылаться на некоторые реализации сторонних библиотек npm, также включен jquery.

Вы можете найти реализацию библиотеки jsonp в npm, это очень просто.

webpack-dev-server

Большинство интерфейсных проектов, будь то проекты vue или проекты реагирования, будут работать с помощью webpack-dev-server. Webpack-dev-server может настроить прокси-сервер для решения проблемы. междоменные проблемы.

 proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
   }

Такие шаблоны, как vue-cli, create-react-app и umi, можно найти в папке конфигурации сервера разработки веб-пакетов и сопоставить.

Примечание. Только в среде разработки производственная среда требует того же принципа, что и веб-сервер. Как его использовать, описано ниже.

document.domain

использоватьdocument.domain Может быть изменен Домен, используемый для доступа к странице, в основном используется в домене родительско-дочерних отношений. Дочерний домен может установить document.domain равным родительскому домену, тем самым решая междоменную проблему одного и того же родительского домена.

Подниматьпример：

www.ios.xingyu.com доступ www.web.xingyu.com Междоменный, можно использовать document.domain установлен на www.xingyu.com

3. Серверные решения

Существует также множество серверных фреймворков, и принципы реализации схожи. Все они модифицируют соответствующие заголовки. В качестве примера возьмем широко используемые фреймворки Java SpringCloud и nodejs koa.

Заголовок CORS HTTP-протокола

Междоменный подход на самом деле является проблемой, которую можно решить на уровне http. Внутреннее решение относительно простое и также является распространенным методом решения для проектов.

CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между источниками) — это система, состоящая из серии передаваемых HTTP-заголовков. Эти HTTP-заголовки определяют, запрещает ли браузер интерфейсному коду JavaScript получать ответы на запросы из разных источников.

Политика безопасности того же происхождения «Междоменное» получение ресурсов по умолчанию заблокировано. но CORS Предоставьте веб-серверу такие разрешения,То есть сервер может выбирать,Разрешить запросы к ресурсам из разных источников.

• Доступ-Контроль-Разрешить-Происхождение Указывает домены, которым может быть предоставлен общий доступ к запрошенному ресурсу.
• Доступ-Контроль-Разрешить-Учетные данные Указывает, следует ли отвечать на запрос, если запрошенные учетные данные помечены как true.
• Заголовки Access-Control-Allow-Headers Используется в ответах на предварительные запросы, чтобы указать, какие заголовки HTTP могут использоваться в фактическом запросе.
• Access-Control-Allow-Methods Указывает, какие ответы на предварительные запросы HTTP метод позволяетдоступ Запрошенный ресурс。
• Заголовки-контроля-доступа-экспозиции Указывает, какие имена HTTP-заголовков могут быть указаны в ответе.
• Доступ-Контроль-Макс-Возраст Указывает, как долго могут храниться в кэше предварительно запрошенные результаты.
• Заголовки запросов контроля доступа Используется для инициирования предварительного запроса, чтобы сообщить серверу, какие заголовки HTTP будут использоваться в формальном запросе.
• Метод-запрос-контроля доступа Используется для инициирования предварительного запроса, чтобы сообщить серверу, какой метод HTTP-запроса будет использоваться для формального запроса.
• Источник Указывает домен, с которого был инициирован запрос на получение ресурса.

Настройки SpringCloud междоменные

Настройте междоменный заголовок в междоменном фильтре * — это подстановочный знак, разрешающий все.

@Configuration
public class GatewayCorsConfiguation {
 
    @Bean
    public CorsFilter corsFilter(){
        // Инициализировать объект конфигурации cors
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true); // Разрешите использование файлов cookie, но при использовании файлов cookie addAllowedOrigin должен быть конкретным адресом и не может быть *
//        configuration.addAllowedOrigin("*");
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.addAllowedMethod("*");  //Разрешенные методы запроса: get, put, post, delete
        Configuration.addAllowedHeader("*");//Разрешенная информация заголовка
 
        //Инициализируем конфигурацию исходного объекта cors
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",configuration);
 
        //3. Вернем новый CorsFilter.
        return new CorsFilter(corsConfigurationSource);
    }
}

Междоменные настройки Koa

koa — это механизм плагинов, и его настройка проще: просто используйте междоменные плагины.

import cors from "koa2-cors";
app.use(cors());

4. Решения по эксплуатации и техническому обслуживанию

Я лишь немного знаю о ngnix, когда дело касается эксплуатации и обслуживания, и не буду говорить о других веб-серверах. Принцип тот же, что и у webpack-dev-server. Настройка прокси-сервера решает междоменные проблемы.

шаг:

• интерфейс и Эксплуатация и обслуживание Обсудить договор путь актерское правила мастерства, такие как /api Представляет доменное имя
• Веб-пакет внешней настройки -dev -server Agent
• Сервер использует nginx для настройки того же прокси-сервера пересылки.

nginx настраивает прокси для решения междоменной конфигурации:

...
location /api {
   proxy_pass https://b.test.com; # настраиватьактерское Протокол и адрес сервера мастерства
}       
...

5. Резюме

На работе большинство из них по-прежнему используют бэкенд или прокси-сервер ngnix для решения проблемы. Фронтенд можно временно настроить во время разработки для решения проблемы.

Справочная ссылка

• https://developer.mozilla.org/zh-CN/docs/Glossary/CORS
• https://developer.mozilla.org/zh-CN/docs/Glossary/Origin
• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS