CODEWITHSUNDEEP
angularspring
Sriram Arvind Lakshmanakumar
Sriram Arvind Lakshmanakumar

Reputation: 676

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

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.

PostMan Image

Am I doing something wrong in typescript?

Upvotes: 3

Views: 12376

Answers (3)

Santosh Shinde
Santosh Shinde

Reputation: 1212

you have to allow cors request because your client and and serve are deployed on different domain. So install cors at server and allow client to connect. refer this : - https://www.baeldung.com/spring-cors

Upvotes: 0

Raymond
Raymond

Reputation: 396

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.

Upvotes: 1

anysunflower
anysunflower

Reputation: 140

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

Upvotes: 1

Related Questions