В разработке, где front-end и back-end разделены, статические ресурсы front-end хранятся на локальной машине и доступны через localhost, если API на стороне сервера вызывается напрямую, он не сможет быть доступным в обычном режиме из-за междоменных проблем. Чтобы решить междоменные проблемы, вы можете использовать JSONP или позволить серверу установитьAccess-Control-Allow-OriginСнять ограничения. Однако не все интерфейсы могут это сделать, поэтому, как правило, необходимо настроить внешний прокси для решения междоменной проблемы.
задний план
Недавно взялся за проект.Процесс настройки прокси очень интересный и записанный. Кратко опишите сценарий:projectAЭто обычная страница, но некоторые области и некоторые всплывающие слои имеют ссылки в виде фреймов.projectBИ ограничение внутреннего интерфейса для соображений безопасностиТолько принимает данные из указанного доменного имени (*.server.com) запрос, запросы с локального хоста или IP будут перенаправлены непосредственно на интерфейс входа в домен сервера (server.com/login). нужно начинать одновременноprojectA(локальный: 8087) иprojectB(localhost:8085) два проекта.
devServer.proxy Дафа
Наиболее распространенным является использование конфигурации внешнего прокси веб-пакета devServer.proxy.
Первое, что я попробовал, этоprojectAСервер разработки настроен следующим образом:
devServer: {
proxy: {
'/api': { // 需要直接代理到线上环境的接口
target: 'http://ad.server.com',
changeOrigin: true,
headers: {
// 后端要校验请求源，那改下 host 或者 origin 不就美滋滋了？
Host: 'ad.server.com',
Origin: 'ad.server.com'
},
},
'/apitest': { // 需要与后端联调的接口
target: '10.8.0.1:9909',// 后端本地开发环境
},
'/iframe': {
target: 'http://localhost:8085',
}
// 另外还有 iframe 里的 api 调用指向线上环境
}
}
Тем не менее, интерфейс бэкэнда резко переходит к интерфейсу входа в систему 😭. Возможно, внутренний интерфейс использует файлы cookie для определения текущего домена входа, а прошлые запросы с локального хоста не содержат файлы cookie. Позже я пытался найти, что добавление куки в заголовки прокси может сломать прыжок, но возвращаемый результат запроса в прошлом все равно сообщал об ошибке, а бэкенд говорил, что аутентификация не удалась.
SwitchyOmega
Поскольку доступ с локального хоста невозможен, доступ к нему должен осуществляться сserver.comпосетить этот домен. Простой способ сделать это — использовать плагин для браузера.SwitchyOmegaНастройте прокси. которыйhttp://ad.server.com/*Все запросы к localhost8087,http://ad.server.com/iframe/*Все запросы указывают на localhost8085, а затем часть API удаляется и напрямую проксируется обратно в сеть.
Плохо то, что некоторые статические ресурсы не нужно проксировать локально, напримерhttp://ad.server.com/static/*Локально его может вообще не быть, и его приходится снова указывать на линию. В это время проект B в iframe снова начал выступать в роли демона.Статические ресурсы в нем хранились в нескольких каталогах, и их приходилось настраивать рядом друг с другом.Окончательная полная конфигурация стала крайне долгой.
SwitchyOmegaНастройки прокси можно задавать как глобально, так и для отдельных доменов (нажмите наSwitchyOmegaСмотрите эту воронку ниже). Это привело к моему кошмару: я также использовал это для небольших тестов трафика, когда работал над другими проектами.SwitchyOmegaагент, также включаетserver.comМодификация домена, после нескольких метаний, непонятно, глобальный прокси сейчас или отдельный доменный прокси (а в реальных проектах более чемserver.comЭтот домен), ежедневные сомнения: "Какой домен куда проксируется?"
Чтобы избежать этой путаницы, только один Chrome в левой руке и один Canary (разрабатываемая версия Chrome) в правой руке, два разных браузера независимы.SwitchyOmegaконфигурация.
Charles
Я почувствовал позжеSwitchyOmegaТакой инструмент доступа в Интернет не очень профессионален для разработки, а практика переключения браузеров на прокси действительно неудобна, поэтому вместо этого я использую его.Charels. После открытия прокси используйте егоMap RemoteФункция, вы можете настроить, какие запросы куда проксируются. Поскольку его интерфейс является графическим, а функции относительно мощными,SwitchyOmegaЗдесь можно использовать копию конфигурации. СравниватьSwitchyOmegaНапротив, нет необходимости переписывать статические ресурсы, которые должны быть проксированы онлайн, поэтому конфигурация будет меньше.
Причина, по которой я, наконец, отказался от Чарльза, заключается в том, что он слишком застрял 😭. Когда одновременно настроено несколько прокси-адресов, вентилятор компьютера крутится, и запрос проксируемого URL-адреса не может вернуть результаты в течение длительного времени. а такжеSwitchyOmegaа такжеCharlesИх нельзя копировать и модифицировать пачками, приходится менять их по одной в графическом интерфейсе, что иногда очень хлопотно (например, переключение онлайн-среды на back-end среду разработки).
Nginx
Если вы хотите более гибко копировать и модифицировать конфигурацию, то, конечно, идеальным является редактируемый файл конфигурации.NginxПросто может очень легко изменить файл конфигурации и начать локальныйNginxпроцесс не будет такимCharelsЗначит ресурсоемкий. Окончательная конфигурацияNginxЭто может выглядеть так:
http:{
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
upstream localhost8083 {
server 127.0.0.1:8083;
keepalive 2000;
}
upstream localhost8087 {
server 127.0.0.1:8087;
keepalive 2000;
}
upstream rd {
server 10.8.0.1:9909;
keepalive 2000;
}
upstream server {
server ad.server.com;
keepalive 2000;
}
server {
listen 80;
# api接口用于和后端开发联调
location ^~ /api/{
proxy_pass http://rd;
proxy_set_header Host $host:$server_port;
}
# 代理 projectA 的页面
location ~ /(path1|path2|path3)/ {
proxy_pass http://localhost8087;
proxy_set_header Host $host:$server_port;
}
# 代理 projectA 的静态资源
location ^~ /projectA_static/ {
proxy_pass http://localhost8087;
proxy_set_header Host $host:$server_port;
}
# 代理 projectA 的 hot-update
location ~ \.hot-update.js$ {
proxy_pass http://localhost8087;
proxy_set_header Host $host:$server_port;
}
# 代理 projectB 的 iframe 页面
location ~ /(path_iframe1|path_iframe2|path_iframe3) {
proxy_pass http://localhost8085;
proxy_set_header Host $host:$server_port;
}
# 代理 projectB 的静态资源
location ^~ /projectB_static/ {
proxy_pass http://localhost8085;
proxy_set_header Host $host:$server_port;
}
# 剩下的请求正常走 server.com 线上环境
location / {
proxy_pass http://server;
proxy_set_header Host server;
}
}
использоватьNginxГибкие правила, вы можете комбинировать несколько похожих правил прокси без настройкиCharlesВы должны вставить их один за другим. Еще одним преимуществом является то, что вы можете гибко управлять своей собственной прокси-средой, если в будущем будут более проблемные проекты, такие как этот прокси, вы можете разделить их на два.nginx.confфайл, вы можете указать, какой файл conf использовать при его использовании. Если вы используетеCharlesДля управления все прокси находятся в списке конфигурации, и их будет очень сложно поддерживать, если прокси слишком много.
Однако эта машинаNginxАгент обычно должен модифицировать файл hosts с изменением файла hosts.test.server.com(Домен сделал сам, здесь доволен*.server.comОн может пройти внутреннюю проверку) и указать на локальный хост. запускатьNginxУкажите для прослушивания порт 80, чтобы получить доступtest.server.comкогда (фактически доступ кlocalhost:80) будетNginxк агенту. После настройки посетитеad.server.com/онлайн-среда, измененная наtest.server.com/Это родная среда, безболезненное переключение, очень комфортно.
Суммировать
Вышеупомянутые методы могут удовлетворить потребности агента в определенных сценариях. Позже выяснилось, что у общины есть специальные колеса.xswitch,zan-proxy. Тем не менее, в качестве фронтенд-разработки лучше ознакомиться сCharelsа такжеNginxТоже хороший выбор.