How to resolve CORS issue in Angular 12?

Question

I am working on an Angular project and I have login page and during submitting login API, I am facing CORS error. I am attaching screenshot of it also. Any suggestion would be appreciated.

 API Service.ts:

           constructor( private http: HttpClient ) { }
              httpOptionsPost = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Credentials': 'true',
                  'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS',
                  'Access-Control-Allow-Headers' : 'Origin, Content-Type, Accept, X-Custom-Header, Upgrade-Insecure-Requests',
                })
              };
        
              httpOptionsGet = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                })
              };
        
              _login(username, password) {
                const url = this.domain + '/api/login?username='+username+'&password='+password;
                return this.http.post(url, {}, this.httpOptionsPost);
              }

Login Component: 

    this.apiService._login(data.username, data.password).subscribe((resp: any) => {
          const resobj = JSON.parse(JSON.stringify(resp));
          console.log(resobj);
    })

Does this answer your question? [How to enable CORS in AngularJs](https://stackoverflow.com/questions/23823010/how-to-enable-cors-in-angularjs) — Avinash, Jun 23 '21 at 11:45
cors is related with backend. Be sure you allowed from api to reach requests — mr. pc_coder, Jun 23 '21 at 12:08

score 2 · Answer 1 · answered Jul 01 '21 at 19:14

You need to set up proxy configuration for running the app locally.

A short example is:

// create a file proxy.config.json
{
  "/api": {
    "target": "http://example.com/", // put your actual domain
    "secure": false // true or false depending on your needs.
  }
}

Then run your project passing the proxy conf to ng-serve or configure it in the package.json. For instance:

ng serve --proxy-config proxy.conf.json

or

npm start -- --proxy-config proxy.conf.json

Or simply configure it in the angular.json.

Then, in your code, remove the usage of the domain, or assign the domain to localhost using environment.dev.ts if the domain is not the same as where you are going to deploy you app. I'm referring to the domain variable in this block.

_login(username, password) {
    const url = this.domain + '/api/login?username='+username+'&password='+password;
    return this.http.post(url, {}, this.httpOptionsPost);
}

More details in https://www.positronx.io/setting-up-angular-proxy-configuration-via-angular-json/ and / or in the official webpack site for advanced proxy configurations

score 2 · Answer 2 · answered Jul 09 '21 at 08:56

Cors preflight should be handled at server side code. In your case try adding below annotation onto your controller class.

@CrossOrigin("*") 
@PostMapping("/user")
public User userController(){

}

And hope you have a configuration class for handling the CORS, if not try adding one. Sample code for reference.

@Configuration
public class SpringSecurityConfiguration extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    List<String> allowedMethods=new ArrayList<>();
    allowedMethods.add("GET");
    allowedMethods.add("POST");
    allowedMethods.add("PUT");
    allowedMethods.add("DELETE");
    CorsConfiguration cors=new CorsConfiguration();
    cors.setAllowedMethods(allowedMethods);

     http.cors().configurationSource(request -> cors.applyPermitDefaultValues());

    http.csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .authorizeRequests().requestMatchers(EndpointRequest.to("loggers")).hasRole("ADMIN").and().httpBasic();

}}

score 2 · Answer 3 · answered Oct 19 '21 at 05:51

2

in your question , the pc_coder answer is right: cors is related with backend. Be sure you allowed from api to reach requests

like the link: How does Access-Control-Allow-Origin header work?

answered Oct 19 '21 at 05:51

ZW.Huang

71
7

score 0 · Answer 4 · edited Jun 23 '21 at 11:57

I'm not quite familiar with Angular. However, I had the same CORS issue with Vue.js and the solution is to change the add these lines :

module.exports = {
  
    devServer: {
        proxy: 'https://yourdomain'
    }
    
  
}

and also replace the https://yourdomain/login to localhost when you do .get or .post, for example : 'http://localhost:8082/login'

I'm not sure if this would work for you since I am also very new at this, but it did work for me.

score 0 · Answer 5 · answered Jun 23 '21 at 12:03

0

Before browser makes a call to your API URL from the angular client application, it will send a preflight request (An HTTP OPTIONS call). this will happen only when your client side application and server side applications are residing in different sub domains or domains. It is the responsibility of the server side application to control whether the cross origin request should be served or not. I see that you are setting the CORS headers in your request header. but it should be received from the API server. so remove that from the angular end and make the proper changes in the server side code.

answered Jun 23 '21 at 12:03

Vilsad P P

1,529
14
23

I tried this way too, but still receiving same error again. – Rakhi Sharma Jun 23 '21 at 13:27
whats your backend platform ? can you share a code snippet ? – Vilsad P P Jun 24 '21 at 05:03
I am using Spring Boot with JPA in java. – Rakhi Sharma Jun 24 '21 at 05:14
https://spring.io/guides/gs/rest-service-cors/ this document contains CORS settings, also you need to remove the below lines from your client side code 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': 'true', 'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers' : 'Origin, Content-Type, Accept, X-Custom-Header, Upgrade-Insecure-Requests', – Vilsad P P Jun 24 '21 at 05:31

score 0 · Answer 6 · answered Jun 23 '21 at 12:11

By default, the Same-Origin-Policy (SOP) forbids request to a different resource. Everything should be loaded from the same source. This is to prevent websites to load data from different servers without the users knowledge. However, there are circumstances where this is required. To cover such case and still provide high safety measurements, CORS was created. With CORS it is possible to send requests to a server different than the original one. For this the webserver which is receiving the request must be configured accordingly. In your case this means, you have to adjust the CORS settings in the application which is providing the login API you are calling and allow localhost:4200 to be able to send CORS requests.

I already tried this way, but error did not resolved. – Rakhi Sharma Jun 23 '21 at 13:26 — Rakhi Sharma, Jun 23 '21 at 13:26

How to resolve CORS issue in Angular 12?

6 Answers6