How to check react application with cors policy

Task :: Check the Cors Policy error at live url and local url :::::::::::::::::::::


Note :: react mein simple login api ki application banai hai , ya pehle se bani ho ya fir git se ya kaheen se pull lo - 

url by dharmendra -   https://git.heroku.com/reacstcrud.git  -yeh url clone nai hua tha fir skype se zipo file lekar usko extract kiya aur us par kaam kiya tha maine 

note :: dharmendra ki prepared login api ko maine zip skype ke through liya aur fir usko etract kiya tha 

1. take the react application recent 

.....................................................................................................................................................

2. we have to run this application at local portal host and at live portal host :: 

local url :localhost:3001/bx_block_login/login

live_url : https://hrms-finance.b91002.dev.us-east-1.aws.svc.builder.cafe//bx_block_login/login

Note :: 

1. We have to take these two url's from the postman of our skoolfinance project 

2. We will run the url of our prohject rails in backend and react in front end 

.....................................................................................................................................................

3. Changes in the Project :: 

A. in the onSubmit event of login.js -

A.1. change this to this 

before : var params = {user: {email: email, password: password}}

after : var params = {"data":{"type": "email_account","attributes": {"email": "vinaykumar@yopmail.com","password": "12345678"}}}

A.2. Change the local host or live host in this code 

   axios.post("localhost:3001/bx_block_login/login", params, {

        headers: headers

      })

.....................................................................................................................................................

note : remember that this should be email if you are going with email - 

  render() {

    return (

      <div style={{marginTop: 10}}>

        <h3>Login</h3>

        <form onSubmit={this.onSubmit}>

          <div className="form-group">

            <label>Email:  </label>

            <input value={this.state.email} onChange={this.onChangeEmail} type="email" className="form-control"/>

.....................................................................................................................................................

4. run -
at backend - rails s -p 3001 
at frontend - npm start 

.....................................................................................................................................................

5.login page will open automaticlly at front end ::

login - 
any email id and password in the browser put -
check the console ------ this error comes at the local 
note :::   because we have put hardcoded static content at the code so any email and password we give at the browser input and press the login button then the same hardcoded data is going in the request that we have send to the backend 

error
  1. AxiosError {message: 'Unsupported protocol localhost:', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}}
    1. code"ERR_BAD_REQUEST"
    2. message"Unsupported protocol localhost:"
    3. name"AxiosError"

note ::

if i am giving the local url 

localhost:3001/bx_block_login/login 

in the code sublime of axios of login.js then in the backend server i will user rails s -p 3001

if i am giving the live url  ((((((((((   

https://hrms-finance.b91002.dev.us-east-1.aws.svc.builder.cafe//bx_block_login/login

)))))))))))))) 

then the server of live url from grafana will be run .


note :: before this axios error there was some error of '' to "" in my code - 

Screens ::

error in my screen ::


output in dharmendra screen ::




status of the task ::

at local cors policy run at dharmendra screen 

at live cors policy giving error of axios  of all screens of me , rinku and dharmendra 

at local cors policy is giving axios  error in my local screen 


 

Comments

Popular posts from this blog

Rails 7 Features :: Comparison with Rails 6 and Rails 5