Cross-Origin Request Blocked, with post request Angular and Spring

Question

I have created an Angular service, it is authorization service with my own back end.

I have to send a form data to my backend, reqData={"username":"string", "password":"string"}

and some standard headers.

My sign-in component.ts

onSignIn(form: NgForm) {
  const email = form.value.email;
  const password = form.value.password;

  const reqData = {
    'app_uname': email,
    'app_pass': password
  };

  const response = this.authService.signInUser(reqData);
}

My authService:

signInUser(reqData){
    const headerInfo = new Headers({
                                            'Content-Type': 'text/plain',
                                            'X-TIME-ZONE': '+5.30',
                                            'X-DEVICE-ID': '911422351920594',
                                            'X-APP-VERSION': '45',
                                            'X-APP-CHANNEL-NAME': 'ANDROID',
                                            'X-DEVICE-OS-VERSION': '45',
                                            'X-DEVICE-MODEL': 'ANDROID'
                                            });
    const request = this.http.post('http://server-ip/login', reqData, {headers: headerInfo});

    request.subscribe(
          (response) => console.log('Success' + response),
          (error) => console.log('Error' + error)
    );
}

I am at the moment just checking if I'm able to send the data.

I get this error in the log:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS request did not succeed)

Presently my Angular app is hosted locally and my backend in a another computer and communication is via lan.

If I send the same request in post-man, it is works fine, I am sending the request data as form data: where key should be reqData and value should be JSON.

Am I doing something wrong in typescript?

Answer 1

You need to set up CORS. The Same Origin Policy is blocking your request to the server. Suppose you have 2 servers(example.com and example.org). A user visits example.com. The webpage cannot make a request to example.org unless CORS is enabled because of the Same Origin Policy. when enabling CORS the Same Origin Policy is bypassed.

To enable CORS add an ‘Access-Control-Allow-Origin:* header.

I'm guessing post-man, doesn't have the Same Origin Policy implemented.

Answer 2

If your api serve allowing the CORS, then you should set up the proxy in your angular project try create file in your angular project.

proxy.config.json

{
    "/your api": {

           "target": "http://your sever:port",

           "secure": false
    },
}

when use the command ng serve --proxy-config=proxy.conf.json replace ng serve