How to post request Axios from React JS to ASP.NET Core

Question

I want to post a Form information that I created in React JS to ASP.Net Core. I'm using the axios library for HTTP operations on the React side.

I have 2 different questions.

1-) Is it related to the vendorRegistrationController.cs file not standing up on ASP.Net Core side?

2-) Is the axios post process done correctly on the React side? If there are any missing, can you provide documentation or comments?

Thank you in advance.

VendorRegistrationController.cs

namespace Bait.Controllers
{
[Produces("application/json")]
[Route("api/controller")]
[ApiController]
[EnableCors("ReactPolicy")]

public class VendorRegistrationController : Controller
{
    private readonly VendorRegistrationService vendorRegistrationService;

    public VendorRegistrationController(VendorRegistrationService vendorRegistrationService)
    {
        this.vendorRegistrationService = vendorRegistrationService;
    } 

    [HttpGet]
    public IEnumerable<VendorRegistration> Get()
    {
        return vendorRegistrationService.GetAll();
    }

    [HttpGet("{id}")]
    public async Task<IActionResult> Get(int id)
    {
        return Ok(vendorRegistrationService.GetById(id));
    }

    [HttpPost]
    public async Task<IActionResult> Post([FromBody] VendorRegistration vendorRegistration)
    {
        return CreatedAtAction("Get", new { id = vendorRegistration.VendorCustomerID }, vendorRegistrationService.Create(vendorRegistration));
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> Put(int id, [FromBody] VendorRegistration vendorRegistration)
    {
        vendorRegistrationService.Update(id, vendorRegistration);
        return NoContent();
    }

    [HttpDelete("{id}")]
    public async Task<IActionResult> Delete(int id)
    {
        vendorRegistrationService.Delete(id);
        return NoContent();
    }

    public override NoContentResult NoContent()
    {
        return base.NoContent();
    }
  }
 }

Startup.cs

namespace Bait
{
 public class Startup
 {
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });

        services.AddCors(o => o.AddPolicy("ReactPolicy", builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        }));

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

        app.UseStaticFiles();
        app.UseCookiePolicy();

        app.UseCors("ReactPolicy");
        app.UseHttpsRedirection();

        app.UseMvc();

      }
     }
   }

Component RegistrationForm.tsx

     import {axios} from 'axios'

     interface User {
      firstName: 'Alex';
      }


   const axios = require('axios').default;

  const RegistrationForm = () => {
    const [sameAsShipping, setSameAsShipping] = useState(false)
    const router = useRouter()
    const classes = useStyles()
    const bull = <span className={classes.bullet}>•</span>

    const handleFormSubmit = async (values: any) => {
      console.log(values)
    }

  useEffect(() => {
     // Use [] as second argument in useEffect for not rendering each time
    axios.post<User>('https://localhost:5001/api/vendorregistration')
   .then((response) => {
      console.log(response.data);
    });
  }, []);

  const handleCheckboxChange =
      (values: typeof initialValues, setFieldValue: any) => (e: any, _: boolean) => {
      const checked = e.currentTarget.checked

     setSameAsShipping(checked)
     setFieldValue('same_as_shipping', checked)
     setFieldValue('billing_name', checked ? values.shipping_name : '')
  }

 return (
   <Formik
     initialValues={initialValues}
     validationSchema={checkoutSchema}
     onSubmit={handleFormSubmit}
   >
    {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    setFieldValue,
  }) => (
    <form onSubmit={handleSubmit}>
      <Card1 sx={{ mb: '2rem' }}>
       <Typography  variant="h4" align="center" fontWeight="800" mb={2}>
          Create Your Vendor Account
       </Typography>

        <Typography fontWeight="600" mb={2}>
          Account Info
        </Typography>

        <Grid container spacing={6}>
          <Grid item sm={6} xs={12}>
            <TextField
              name="first_name"
              label="First Name*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.first_name || ''}
              error={!!touched.first_name && !!errors.first_name}
              helperText={touched.first_name && errors.first_name}
            />
            <TextField
              name="vendor_name"
              label="Company Name*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.vendor_name || ''}
              error={!!touched.vendor_name && !!errors.vendor_name}
              helperText={touched.vendor_name && errors.vendor_name}
            />
            <TextField
              name="password"
              label="Password*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.password || ''}
              error={!!touched.password && !!errors.password}
              helperText={touched.password && errors.password}
            />
            <Autocomplete
              options={countryList}
              getOptionLabel={(option) => option.label || ''}
              value={values.shipping_country}
              sx={{ mb: '1rem' }}
              fullWidth
              onChange={(_e, value) => setFieldValue('shipping_country', value)}
              renderInput={(params) => (
                <TextField
                  label="Country"
                  placeholder="Select Country"
                  variant="outlined"
                  size="small"
                  error={!!touched.shipping_country && !!errors.shipping_country}
                  helperText={
                    touched.shipping_country && errors.shipping_country
                  }
                  {...params}
                />
              )}
            />
            <TextField
              name="address1"
              label="Address Line 1*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.address1 || ''}
              error={!!touched.address1 && !!errors.address1}
              helperText={touched.address1 && errors.address1}
            />
            <TextField
              name="zip_code"
              label="Zip Code*"
              type="number"
              fullWidth
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.zip_code || ''}
              error={!!touched.zip_code && !!errors.zip_code}
              helperText={touched.zip_code && errors.zip_code}
            />
            
          </Grid>
          <Grid item sm={6} xs={12}>
             <TextField
              name="last_name"
              label="Last Name*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.last_name || ''}
              error={!!touched.last_name && !!errors.last_name}
              helperText={touched.last_name && errors.last_name}
            />
            <TextField
              name="email_address"
              label="Email Address*"
              type="email"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.email_address || ''}
              error={!!touched.email_address && !!errors.email_address}
              helperText={touched.email_address && errors.email_address}
            />
            <TextField
              name="confirm_password"
              label="Confirm Password*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.confirm_password || ''}
              error={!!touched.confirm_password && !!errors.confirm_password}
              helperText={touched.confirm_password && errors.confirm_password}
            />
             <TextField
              name="state"
              label="State*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.state || ''}
              error={!!touched.state && !!errors.state}
              helperText={touched.state && errors.state}
            />
            <TextField
              name="address2"
              label="Address Line 2*"
              fullWidth
              sx={{ mb: '1rem' }}
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.address2 || ''}
              error={!!touched.address2 && !!errors.address2}
              helperText={touched.address2 && errors.address2}
            />
            <TextField
              name="phone_number"
              label="Phone Number"
              fullWidth
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.phone_number || ''}
            />
          </Grid>
        </Grid>
      </Card1>

      <Card1 sx={{ mb: '2rem' }}>
        <Typography fontWeight="600" mb={2}>
          Additional Information / Accept Terms
        </Typography>

        {!sameAsShipping && (
          <Grid container spacing={6}>
            <Grid item sm={6} xs={12}>
            <Autocomplete
                options={countryList}
                getOptionLabel={(option) => option.label || ''}
                value={values.billing_country}
                sx={{ mb: '1rem' }}
                fullWidth
                onChange={(_e, value) => setFieldValue('billing_country', value)}
                renderInput={(params) => (
                  <TextField
                    label="Shop Type"
                    placeholder="Shop Type"
                    error={!!touched.billing_country && !!errors.billing_country}
                    helperText={
                      touched.billing_country && errors.billing_country
                    }
                    {...params}
                  />
                )}
              />
              <Autocomplete
                options={countryList}
                getOptionLabel={(option) => option.label || ''}
                value={values.billing_country}
                sx={{ mb: '1rem' }}
                fullWidth
                onChange={(_e, value) => setFieldValue('billing_country', value)}
                renderInput={(params) => (
                  <TextField
                    label="I'm interested in learning more about..."
                    placeholder="I'm interested..."
                    error={!!touched.billing_country && !!errors.billing_country}
                    helperText={
                      touched.billing_country && errors.billing_country
                    }
                    {...params}
                  />
                )}
              />
              <TextField
                name="billing_contact"
                label="How did your hear about BaitMrkt?"
                fullWidth
                sx={{ mb: '1rem' }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.billing_contact || ''}
                error={!!touched.billing_contact && !!errors.billing_contact}
                helperText={touched.billing_contact && errors.billing_contact}
              />
              <Grid container sx={{mt: '4rem'}}>
                <FormControlLabel
                 label={
                  <FlexBox>
                    I agree to the BaitMrkt
                      <H6 ml={1} color= "#D11C25">
                        Terms & Conditions
                      </H6>
                      <Span ml={1}>
                      and
                      </Span>
                    <H6 ml={1} color= "#D11C25">
                    Privacy Policy*
                      </H6>
                  </FlexBox>
                }
                 control={<Checkbox size="small" color="secondary" />}
                 sx={{
                  zIndex: 1,
                  position: 'relative',
                 }}
                 onChange={handleCheckboxChange(values, setFieldValue)}
                />
          
              </Grid>

             <Grid container>
              <FormControlLabel
                 label={
                  <FlexBox>
                   I agree to receive account updates and other vendor specific
                   information via email.*
                  </FlexBox>
                }
                 control={<Checkbox size="small" color="secondary" />}
                 sx={{
                  zIndex: 1,
                  position: 'relative',
                }}
               onChange={handleCheckboxChange(values, setFieldValue)}
              /> 
        </Grid>      

            </Grid>
          </Grid>
        )}
      </Card1>
      <Grid container>
        <Grid item sm={6} xs={12}>
          <Button variant="contained" color="primary" type="submit">
            REGISTER
          </Button>
        </Grid>
      </Grid>

    </form>
  )}
 </Formik>
   )
  }
 export default RegistrationForm

First thing that I notice is that you are not passing an object as second axios parameter. Also, try using a http utility like postman to test the backend request if you are running into issues — Mike Lunn, Sep 05 '21 at 14:04
Also, the Route parameter on your controller seems to be not consistent with the API URL you are trying to access. Try changing it to [Route("api/[controller]")] — Vineet Desai, Sep 05 '21 at 17:07

score 0 · Accepted Answer · answered Sep 06 '21 at 07:31

0

Using [Route("api/{controller}")] to replace your [Route("api/controller")]

answered Sep 06 '21 at 07:31

Tiny Wang

10,423
1
11
29

Thanks. I updated and backend side works. – Yavuz Sep 06 '21 at 08:43
@Yavuz Thanks for your reply sir and could you pls accept my post as the answer to end this case? – Tiny Wang Sep 06 '21 at 08:46

score 0 · Answer 2 · answered Sep 06 '21 at 08:03

const handleFormSubmit = async (values: any) => {
   axios.post<User>('https://localhost:5001/api/vendorregistration', { data: values })
   .then((response) => {
      console.log(response.data);
    }); 
}

you should move your post request to handleFormSubmit. Also Formik will automatically set isSubmitting to false when the promise resolves/rejects. So a better way would be

const handleFormSubmit = async (values: any): Promise<any> => {
   const response = await axios.post<User>('https://localhost:5001/api/vendorregistration', { data: values })
  setResponseOrHandleResponseSomehow(response);
}

Edit: Only fetch things (GET requests) in useEffect. You probably don't want to post/put things on initial renders.

When I want to access https://localhost:5001/api/vendorregistration "Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin." I take the error. https://stackoverflow.com/questions/18642828/origin-origin-is-not-allowed-by-access-control-allow-origin It is a answer. But I don't know where to add it. — Yavuz, Sep 07 '21 at 00:19

How to post request Axios from React JS to ASP.NET Core

2 Answers2