Angular CLI в режиме разработки и OpenServer для ajax-запросов
Запись от 07.05.2017
Кратко описание проблемы: когда работаем с Angular CLI в режиме разработки (ng serve), то по умолчанию используется http://localhost:4200 и все AJAX-запросы уходят на этот же домен. Использовать бекенд под такой URL не очень удобно. А если подменять путь запроса на нужный домен (например, в OpenServer у нас используется http://mysite.loc/ajax/), то нужно будет бороться с CORS использованием заголовков с допустимыми REST методами, доменами и т.д.
В качестве альтернативы Angular CLI предлагает нам использовать прокси, для этого нужно создать файл с конфигурацией прокси «proxy.conf.json», примерно вот так:
А в «package.json» указать этот прокси в режиме разработки:
Остается запустить CLI:
И проверить работу AJAX-методов по адресу http://localhost:4200/
P.S. Что бы легче гуглить оставлю примеры заголовков для PHP, которые могут быть использованы для работы с CORS:
В качестве альтернативы Angular CLI предлагает нам использовать прокси, для этого нужно создать файл с конфигурацией прокси «proxy.conf.json», примерно вот так:
{
"/ajax/*": {
"target": "http://mysite",
"secure": false,
"changeOrigin": true
},
"/f/*": {
"target": "http://mysite",
"secure": false,
"changeOrigin": true
},
"/upload/*": {
"target": "http://mysite",
"secure": false,
"changeOrigin": true
}
}
Здесь еще два редиректа, для получения фронтенд-файлов из /f/ и ресурсов из upload.А в «package.json» указать этот прокси в режиме разработки:
{
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json",
Остается запустить CLI:
npm start
И проверить работу AJAX-методов по адресу http://localhost:4200/
P.S. Что бы легче гуглить оставлю примеры заголовков для PHP, которые могут быть использованы для работы с CORS:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: content-type");
header("Access-Control-Allow-Methods: PUT");
header('Access-Control-Allow-Credentials: true');