javascript - 跨源请求仅支持 react 中的协议(protocol)方案错误

Question

当我尝试使用 post 方法来响应 nodejs 作为后端 时，出现了这个错误，我不知道为什么，但我认为我的编码只是正确的。请帮我解决这个问题。

Failed to load localhost:3000/doctors/register: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Register.js:36 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at dispatchXhrRequest (xhr.js:178)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js:12)
    at dispatchRequest (dispatchRequest.js:59)

在 react 中

import React, { Component } from 'react'
import axios from 'axios';

class Register extends Component {
  constructor() {
    super()
    this.state = {
      name: '',
      gender:'',
      designation:'',
      email: '',
      password: '',
      confirm_password: '',
      hospital_id:'',
      errors: {}
  }
  this.onChange=this.onChange.bind(this);
  this.onSubmit=this.onSubmit.bind(this);
  }
  onChange(e) {
    this.setState({[e.target.name]:e.target.value})
  }
  onSubmit(e) {
    e.preventDefault();
    var resObj ={
      name:this.state.name,
      gender:this.state.gender,
      designation:this.state.designation,
      email:this.state.email,
      password:this.state.password,
      confirm_password:this.state.confirm_password,
      hospital_id:this.state.hospital_id
    }
    axios.post('localhost:3000/doctors/register',resObj)
    .then(res => console.log(res.data))
    .catch(err => console.log(err))
  }
  render() {
    return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Sign Up</h1>
              <p className="lead text-center">Create your account</p>
              <form onSubmit={this.onSubmit}>
                <div className="form-group">
                  <input type="text" className="form-control form-control-lg" placeholder="Name" name="name" value={this.state.name} onChange={this.onChange} />
                </div>
                <div className="form-group">
                  <input type="text" className="form-control form-control-lg" placeholder="Gender" name="gender" value={this.state.gender} onChange={this.onChange} />
                </div>
                <div className="form-group">
                  <input type="text" className="form-control form-control-lg" placeholder="Designation" name="designation" value={this.state.designation} onChange={this.onChange} />
                </div>
                <div className="form-group">
                  <input type="email" className="form-control form-control-lg" placeholder="Email Address" name="email" value={this.state.email} onChange={this.onChange}/>
                </div>
                <div className="form-group">
                  <input type="password" className="form-control form-control-lg" placeholder="Password" name="password" value={this.state.password} onChange={this.onChange} />
                </div>
                <div className="form-group">
                  <input type="password" className="form-control form-control-lg" placeholder="confirm Password" name="confirm_password" value={this.state.password2} onChange={this.onChange} />
                </div>
                <div className="form-group">
                  <input type="text" className="form-control form-control-lg" placeholder="Hospital_id" name="hospital_id" value={this.state.hospital_id} onChange={this.onChange} />
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Register;

Answer 1

您在 localhost 之前错过了 http:// 或一个简单的 //

Using //localhost... 应该自动使用当前使用的协议(protocol)