Перекрестный общий доступ к ресурсам (CORS) в Angular или Angular 6. Проблема при выполнении кросс-доменных вызовов на localhost с разными портами

Question

Я столкнулся с ситуацией, когда я звоню из моего приложения angular 6 в приложение с весенней загрузкой.Когда я вызываю HTTP-метод post в угловом направлении для приложения, работающего на другом порту, оно выдает исключение.

Доступ к XMLHttpRequest в 'http://localhost:8080/api' из источника' http://localhost:4200' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: у него нет HTTPok status.

Приложение My Angular, работающее на 'http://localhost:4200' номер порта: 4200 Приложение My Spring Boot, работающее на' http://localhost:8080/api': номер порта: 8080.

Тамнет прямого ответа, чтобы решить эту проблему.Есть несколько хаков для отключения безопасности в Chrome, и с помощью NGINX вы можете решить эту проблему.

Answer 1

был полон кошмара с cors на днях, поэтому я переключил свою парадигму программирования.

для моего веб-приложения, которое я разрабатываю, в конце концов, я развернул в производство, в этом случае я использую Heroku, вы можетеиспользуйте GCP или аналогичный.Для работы на стороне сервера, например http, я использую Postman для проверки всех http-маршрутов, почтальон не блокируется cors.он также может быстро отправлять их в упорядоченную папку, а не заполнять весь сценарий использования, просто чтобы получить запрос HTTP.

После того, как мои модульные тесты выполнены и проверены, я развертываю сервер в Heroku и затем работаюна клиенте.таким образом, клиент отправляет запросы на сервер, который является Elsweyr и не получает Cors.

Answer 2

Как, когда вы работаете с угловым и веб-интерфейсом, но они работают на двух портах.Вам необходимо включить политику CORS на вашем сервере.

Если вы используете веб-API, включите политику Cors для вашего проекта, и она решит вашу проблему.

Answer 3

В классе startup.cs добавьте следующие операторы в два метода ConfigureServices и Configure().Это решение работало со мной без необходимости устанавливать CORS в веб-браузерах:

public void ConfigureServices(IServiceCollection services)
    {
        // Add policy for CORS
        services.AddCors(options =>
        {
            options.AddPolicy("AllowAll",
                builder =>
                {
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
        });

       // You additional configurations here....
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors("AllowAll"); // Add this line here or inside if (env.IsDevelopment()) block

        if (env.IsDevelopment())
        {
            // app.UseCors("AllowAll");
            app.UseDeveloperExceptionPage();
        }
}

Answer 4

Для решения вышеупомянутой проблемы

1. Сначала вам необходимо предоставить общий доступ к загрузочному ресурсу Spring для порта 4200. Пометьте класс или метод с помощью @ CrossOrigin (origins = "*).1006 *http://localhost:4200") ресурса, которым вы хотите поделиться.

2. Вам необходимо настроить прокси в угловом приложении. Создайте файл proxy.json в угловом корневом приложении. Содержание ниже

   {
   "/api/*": {
       "target": "http://localhost:8080",
       "secure": "false",
       "logLevel": "debug",
       "changeOrigin": true
   }
   

   }

3. И затем запустите ng serve --proxy-config proxy.json, эта команда скомпилирует код. Вы должны увидеть что-то подобное на консоли.

   building modules 3/3 modules 0 active[HPM] Proxy created: /api -> 
   http://localhost:8080 Subscribed to http-proxy events: [ 'error', 'close' ]