ax ios vue js - запрос перекрестного происхождения заблокирован, политика одного источника запрещает чтение удаленного ресурса - PullRequest
1 голос
/ 07 мая 2020

Я новичок vue js, я хочу отправить API данных с vue JS на Backend Laravel. Данные уже отправлены в серверную часть и уже сохранены в базе данных. Но когда я проверяю консоль после параметра отправки, тогда vue js перенаправляет на catch not response .

И эта ошибка в консоли => Запрос на кросс-источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу http://localhost: 2000 / register / store . (Причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin').

enter image description here

Не знаю, почему параметр имеет был получен в бэкэнде и успешно, но vue js не перенаправляет на ответ . Поэтому он не отображает предупреждающее сообщение: (

Этот ответ от бэкэнда laravel:

{"message":"Success!","status":"200","value":"{\"nama\":\"test\",\"email\":\"test@gmail.com\",\"password\":\"123\",\"updated_at\":\"2020-05-07T05:50:41.000000Z\",\"created_at\":\"2020-05-07T05:50:41.000000Z\",\"id\":48}"}

И это мой код

<template>
      <div id="app">
        <img alt="Vue logo" style="width:100px;height:100px" src="./assets/logo.png"><br/><br/>
        <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Sign Up Form</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Let's join our web today.</h6>
                        <div v-if="loading == true">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <form v-else v-on:submit="submitSignUp" class="text-left">
                            <div class="form-group">
                                <label for="exampleInputFullname">Full name</label>
                                <input type="text" class="form-control" id="exampleInputFullname" v-model="fullnameForm" placeholder="Enter Full name">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="emailForm" placeholder="Enter email">
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" v-model="passwordForm" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">Submit</button>
                        </form>
                        </div>
                </div>
                </div>
        </div>
    </div>

      </div>
    </template>

    <script>
    import axios from 'axios';
    export default {
      name: 'app',
      data() {
        return {
          responseAPI: '',
          loading: false,
          fullnameForm: '',
          emailForm: '',
          passwordForm: ''
        }
      },
      methods: {
        submitSignUp(params) {
          this.loading = true;
          var optionAxios = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
          }
          const formData = new FormData();
          formData.append('name', this.fullnameForm);
          formData.append('email', this.emailForm);
          formData.append('password', this.passwordForm);
          axios.post('http://localhost:2000/register/store',formData,optionAxios)
            .then(response => {
              this.responseAPI = response;
              //why not display this alert
              if(response.status == 200) {
                alert('form success');
              } else {
                alert('form failed');
              }
            })
            .catch(error => {
              console.log(error);
              this.errored = error;
            })
            .finally(() => {
              this.loading = false
              this.fullnameForm = '',
              this.passwordForm = '',
              this.emailForm = ''
              })
            params.preventDefault();
        }
      }
    }
    </script>

    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
...