node решается с помощью 2 строк кода 👉 кросс-доменный HTTP 😎

Node.js
Кодовый адрес:GitHub.com/ξ NY UE ξ Австрия/…

1. Производство различных источников

1. Создайте сервер 3006 для обработки запроса.

1.1 На странице index.html смоделируйте запрос для API/пользователей

1.2 Сервер моделирования, сервер находится на порту 3006


1.3 Используйте nodemon для запуска api.js, и вы можете увидеть информацию о запросе на http://localhost:3006/


nodemon используется для запуска службы узла.Используйте этот инструмент для автоматического обновления кода службы после сохранения без повторного выполнения файла запуска.

2. Создайте еще один сервер 3008 для запроса данных



2.1 Запустите две службы порта вместе, добавьте два файла службы в index.js и запустите index.js.

2.2 Доступ 3008 в это время, доступ к API/пользователям 404


3. Исправьте это


3.1 👁 Проблема с портом

3.1.1. Измените запрос интерфейса index.html на порт 3006.


  • Сравнивая запросы интерфейсов разных портов, обнаруживается, что при доступе с 3006 по 3008 запрос интерфейса выполняется успешно, и браузер перестает отображаться.


  • Просмотр ошибок браузера ---> В это время произошел междоменный запрос (разные порты)


Заблокировано из источника с помощью политики CORS"http://localhost:3008 «Доступ»http://localhost:3006/API/пользователи"
XMLHttpRequest по адресу: заголовок «Access-Control-Allow-Origin» имеет значение «http://localhost:3008' не соответствует указанному источнику.
  • Отсюда мы знаем, что Access-Control-Allow-Origin должен быть установлен на стороне сервера.

- не установлен`Access-Control-Allow-Origin`


- Установите `Access-Control-Allow-Origin`, страница отображается нормально


3.1.2 Как видно из вышеизложенного, кроссдоменность ограничена браузером, это здесь? нисколько

Приведенный выше пример представляет собой простой запрос. HTTP также отправит предварительный запрос. Что вызовет предварительный запрос? HTTP-запрос использует следующие HTTP-методы.
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH

илиискусственно установленныйCORS-безопасный набор полей заголовкадругие поля заголовка

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-TypeЗначение не является одним из следующих:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
    • Автор: coder_sherry
    Связь:ву ву(см. более подробное объяснение)
    Источник: Цзяньшу

    3.2 👁 Проблема с предварительным запросом

    3.2.1 Имитировать предварительный запрос --> искусственно установить небезопасные поля CORS

    В настоящее время браузер находится в состоянии ожидания и должен выполнить предварительный запрос, чтобы привести его в нормальное состояние.

    3.2.2 Реализуйте предварительный запрос --> установите небезопасное поле, чтобы разрешить


    • После того, как предварительный запрос изменен на «пройдено», будут инициированы два запроса, первый из которых является предварительным запросом, а «X-Token» устанавливается в качестве разрешенного поля.


    • Второй — обычный запрос, в это время X-Token стал разрешенным, запрос нормальный, и значение X-Token установлено для обычного запроса.


    3.3 👁`withCredentials` учетные данные междоменного запроса

    XMLHttpRequest.withCredentials собственность - этоBooleanТип, который указывает, следует ли использовать квалификационные сертификаты, такие как файлы cookie, заголовки авторизации (авторизация заголовков) или клиентские сертификаты TLS, для создания управления доступом между сайтами (управление доступом между сайтами).Access-Control)просить. использовать на том же сайтеwithCredentials属性是无效的。

    3.1 Если в заголовок вашего запроса необходимо добавить файлы cookie, вам необходимо установить для `withCredentials` значение `true` в соответствующей позиции.

    4.Прокси прокси

    4.1 Добавьте прокси к прокси и аннотируйте ранее добавленную операцию разрешения


    4.2 Запустите nodemon proxy.js


    4.3 Резюме, две строчки решают 😎




    Категории