Как решить кроссдоменность самостоятельно в локальной фронтенд-разработке

перекрестный доменЭто проблема, с которой фронтенд часто сталкивается в процессе локальной разработки.Иногда большинство проблем решается бэкендом детской обуви. Ха-ха Но автор имеет свое отношение и в основном сам решает эту проблему. Без лишних слов, давайте сначала разберемсяперекрестный доменкак он производится.

1. Что такое междоменный домен?

Междоменный: относится к тому факту, что браузер не может выполнять сценарии с других веб-сайтов. Это вызвано политикой браузера о том же происхождении, ограничением безопасности, наложенным браузером на javascript.

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

Та же политика происхождения: Это означает, что протокол, имя домена и порт должны быть одинаковыми, и если один из них отличается, это приведет к междоменному;

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

2. Как решить кроссдоменность

1.API для обмена данными между документами: окно.postMessage() Вызовите метод postMessage для реализации родительского окна.A.comв дочернее окноB.comОтправить сообщение (дочернее окно также может отправить сообщение родительскому окну с помощью этого метода. В основном он решает следующие сценарии

Передача данных страницы и новое окно, которое она открывает
Передача сообщений между несколькими окнами
Страницы с вложенными сообщениями iframe
Междоменная передача данных в описанных выше трех сценариях

// 父窗口打开一个子窗口
var openWindow = window.open('http://A.com', 'hello');
 
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('how are you', 'http://B.com');

2.JSONP

JSONP — это распространенный метод для связи между серверами и клиентами из разных источников. Самая большая особенность заключается в том, что он прост и применим, и имеет хорошую совместимость (совместим с более низкими версиями IE), а недостатком является то, что поддерживаются только запросы на получение, а запросы на публикацию не поддерживаются.

Основная идея: веб-страницы путем добавления

Путь JQ

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

Как импортировать нативный js

var xhr = new XMLHttpRequest(); 
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.A.com/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);
    }
};

3.Nginx(обратный прокси)

NginxСпособ борьбы с междоменными на самом деле является обратным обратным прокси. Так что же такое обратный прокси? С точки зрения непрофессионала, мы не можем получить прямой доступ к целевому серверу, в данный момент нам нужно реализовать это через прокси, это безразлично пользователю или нашей разработке, потому что эти процессы обрабатывает nginx для нас. Код конфигурации выглядит следующим образом

        listen       8081;
        server_name  localhost 127.0.0.1;  //当前服务的域名

     
        #location ~ ^/(yunpos|agent)/ {   //添加访问目录为/apis的代理配置
                #proxy_pass  https://manage-api.yingqianpos.com;  #线上后台api
                #proxy_pass  https://yunpos-manageapi.cs.kemai.com.cn;  #测试后台api
        #}

4.Прокси-сервер Node.js

1.koa-server-http-proxyэто промежуточное ПО koa2

const Koa = require('koa')

const app = new Koa()

const proxy = require('koa-server-http-proxy')

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (ctx.method == 'OPTIONS') {
    ctx.body = 200;
  } else {
    await next();
  }
});


app.use(proxy('/yunpos', {
  target: 'https://manage-gray.yingqianpos.com',
  pathRewrite: { '^/yunpos': '' },
  changeOrigin: true
}))

app.listen(8081)

2.# http-proxy-middlewareЭто прокси-метод, предоставляемый node.js.

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/yunpos',
  createProxyMiddleware({
    target: 'https://manage-gray.yingqianpos.com',
    changeOrigin: true,
    pathRewrite: {
    '^/yunpos': '', // rewrite path
  },
  }));
app.listen(8081)

Хотя фреймворки vue и react уже обработали междоменные запросы, это благо для загрузки нашего фронтенда. Но все еще есть некоторые традиционные проекты, которые все еще требуют от нас реализации междоменных запросов другими способами. Прокси-сервер узла и обратный прокси-сервер nginx в настоящее время наиболее часто используются мной. Должен быть лучший способ, я надеюсь, вы можете поделиться им со мной. Старые правила, одноклассники, кто видел, пожалуйста, пошевелите руками, чтобы понравилось