origin http localhost 4200 has been blocked by CORS policy in Angular7

Question

I want to use of http   5 160 2 148 8091 api trainTicketing city findAll rest for get cities in my angular project  I used version 7 2 15 of angular in my project  when get this url with httpClient throw following error      Access to XMLHttpRequest at  http   5 160 2 148 8091 api trainTicketing city findAll  from origin  http   localhost 4200  has been blocked by CORS policy  Response to preflight request doesn t pass access control check  No  Access-Control-Allow-Origin  header is present on the requested resource    While at work correctly when enter url in browser and postman   why

User · Answer

Follow these steps   Add cors dependency  type the following in cli inside your project directory      npm install --save cors    Include the module inside your project       var cors   require  cors       Finally use it as a middleware       app use cors

User · Answer

For nodejs use the below code res setHeader  Access-Control-Allow-Origin    http   localhost 4200

User · Answer

If your project is  net Core 3 1 API project  update your Startup cs in your  net core project to  public class Startup       public Startup IConfiguration configuration                Configuration   configuration             public IConfiguration Configuration   get        readonly string MyAllowSpecificOrigins    quot  myAllowSpecificOrigins quot          This method gets called by the runtime  Use this method to add services to the container      public void ConfigureServices IServiceCollection services                services AddCors options   gt                        options AddPolicy MyAllowSpecificOrigins              builder   gt                                builder WithOrigins  quot http   localhost 53135 quot                                        quot http   localhost 4200 quot                                                                             AllowAnyHeader                                        AllowAnyMethod                                        services AddDbContext lt CIVDataContext gt  options   gt          options UseSqlServer Configuration GetConnectionString  quot CIVDatabaseConnection quot              services AddControllers                  This method gets called by the runtime  Use this method to configure the HTTP request pipeline      public void Configure IApplicationBuilder app  IWebHostEnvironment env                if  env IsDevelopment                          app UseDeveloperExceptionPage                      app UseCors MyAllowSpecificOrigins            app UseRouting             app UseAuthorization             app UseEndpoints endpoints   gt                        endpoints MapControllers

User · Answer

If you are using spring-boot for server side coding then please add a servlet filter and add the following code of your spring-boot application  It should work  Adding  quot Access-Control-Allow-Headers quot    quot   quot  is mandatory  Creation of proxy conf json is not needed       Component  Order 1  public class MyProjectFilter implements Filter         Override     public void doFilter ServletRequest req  ServletResponse res              FilterChain chain  throws IOException  ServletException           HttpServletResponse response    HttpServletResponse  res          response setHeader  quot Access-Control-Allow-Origin quot    quot   quot            response setHeader  quot Access-Control-Expose-Headers quot    quot Content-Disposition quot            response setHeader  quot Access-Control-Allow-Methods quot    quot GET POST PATCH DELETE PUT OPTIONS quot            response setHeader  quot Access-Control-Allow-Headers quot    quot   quot            response setHeader  quot Access-Control-Max-Age quot    quot 86400 quot            chain doFilter req  res

User · Answer

In my case using Angular and Spring Boot I solved that issue in my SecurityConfig  http csrf   disable   cors   disable                authorizeRequests                antMatchers HttpMethod POST   quot  register quot                anonymous                anyRequest   authenticated                and                sessionManagement   sessionCreationPolicy SessionCreationPolicy STATELESS    Or replace that line to  http csrf   disable   cors   and    And other test option is to delete dependency from pom xml and other code depend on it  It s like turn off security from Spring   lt dependency gt        lt groupId gt org springframework boot lt  groupId gt        lt artifactId gt spring-boot-starter-security lt  artifactId gt        lt version gt 2 3 3 RELEASE lt  version gt   lt  dependency gt

User · Answer

1  Create a class WebMvcConfig and extend it as shown from the WebMvcConfiguration and override addCorsMappings method  2  Most importantly don t forget to make it  Configuration annotation because it should be loaded with Main Spring class to allow Cross-Origin     Configuration     public class WebMvcCofig implements WebMvcConfigurer           Override         public void addCorsMappings CorsRegistry registry                registry addMapping  quot    quot                        allowedOrigins  quot   quot                        allowedMethods  quot   quot                        allowedHeaders  quot   quot                        allowCredentials true

User · Answer

I Tried adding the below statement on my API on the express server and it worked with Angular8  app use  req  res  next    gt        res header  quot Access-Control-Allow-Origin quot    quot   quot        res header  quot Access-Control-Allow-Methods quot    quot GET   PUT   POST   DELETE quot        res header  quot Access-Control-Allow-Headers quot    quot Content-Type  x-requested-with quot        next       Important

User · Answer

Solution 1 - you need to change your backend to accept your incoming requests   Solution 2 - using Angular proxy see here      Please note this is only for ng serve  you can t use proxy in ng build   Note  the reason it s working via postman is postman doesn t send preflight requests while your browser does

User · Answer

For temporary testing during development we can disable it by opening chrome with disabled web security like this  Open command line terminal and go to folder where chrome is installed i e  C  Program Files  x86  Google Chrome Application Enter this command  chrome exe --user-data-dir  quot C  Chrome dev session quot  --disable-web-security A new browser window will open with disabled web security  Use it only for testing your app

User · Answer

You are all good at Angular side even postman not raise the cors policy issue  This type of issue is solved at back-end side in major cases  If you are using Spring boot the you can avoid this issue by placing this annotation at your controller class or at any particular method   CrossOrigin origins    quot http   localhost 4200 quot    In case of global configuration with spring boot configure following two class     EnableWebSecurity  AllArgsConstructor  public class SecurityConfig extends WebSecurityConfigurerAdapter    Override     public void configure HttpSecurity httpSecurity  throws Exception          httpSecurity csrf   disable            authorizeRequests            antMatchers  quot  api1    quot   permitAll            antMatchers  quot  api2    quot   permitAll            antMatchers  quot  api3    quot   permitAll                  Configuration  EnableWebMvc public class WebConfig implements WebMvcConfigurer         Override     public void addCorsMappings CorsRegistry corsRegistry            corsRegistry addMapping  quot     quot                    allowedOrigins  quot http   localhost 4200 quot                    allowedMethods  quot   quot                    maxAge 3600L                   allowedHeaders  quot   quot                    exposedHeaders  quot Authorization quot                    allowCredentials true

User · Answer

Startup cs in WebAPI   app UseCors options   gt  options AllowAnyOrigin         In ConfigureServices method    services AddCors c   gt            c AddPolicy  AllowOrigin   options   gt  options AllowAnyOrigin             In Controller     HttpGet          Route  GetAllAuthor            EnableCors  AllowOrigin

User · Answer

The solution needs to add these headers to the server response    Access-Control-Allow-Origin        Access-Control-Allow-Methods    GET POST OPTIONS DELETE PUT    If you have access to the server  you can add them and this will solve your problem  OR  You can try concatentaing this in front of the url   https   cors-anywhere herokuapp com

User · Answer

For  NET CORE 3 1 I was using https redirection just before adding cors middleware and able to fix the issue by changing order of them What i mean is  change this  public void Configure IApplicationBuilder app  IWebHostEnvironment env                                    app UseHttpsRedirection               app UseCors x   gt  x              AllowAnyOrigin                AllowAnyMethod                AllowAnyHeader                         to this  public void Configure IApplicationBuilder app  IWebHostEnvironment env                                    app UseCors x   gt  x              AllowAnyOrigin                AllowAnyMethod                AllowAnyHeader              app UseHttpsRedirection                         By the way  allowing requests from any origins and methods may not be a good idea for production stage  you should write your own cors policies at production

User · Answer

if You use spring boot   you should add origin link in the  CrossOrigin annotation    CrossOrigin origins    http   localhost 4200    GetMapping   yourPath     You can find detailed instruction in the https   spring io guides gs rest-service-cors

[angular] origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to angular