跨源请求仅支持协议方案错误反应

Question

当我尝试使用post 方法与nodejs as backend 做出反应时，它得到了这个error，我不知道为什么，但我认为我的编码只是正确的。请帮我解决这个问题。

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)

反应中

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:// 或简单的//

使用//localhost...应该会自动使用当前使用的协议

Answer 2

根据要求单独回答 - 设置代理后，您不再需要提供完整路径，相对路径即可

localhost:3000/doctors/register 到 /doctors/register

Answer 3

对我有用的解决方案是在 NodeJS 服务器 main/index/server.js 文件中定义 app 之后将标头设置为。

    app.use((req, res, next) => {
     res.set({
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
       'Access-Control-Allow-Headers': 'Content-Type'
     })
     next();
   })

这应该可以解决它。

Answer 4

这是一个 CORS 问题 - 在你的 react 客户端 package.json 中放置一个 API 代理

 "proxy": "http://localhost:5000/"

您还需要在组件中更新您的 URL

这是一个类似的帖子How to create a proxy in React/Webpack to call an external API

Answer 5

一个有 REACT 和 Node CORS 问题的项目被解决为

反应：

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.post('http://localhost:port/..../add_', obj)
    .then(res => console.log(res.data));

这里“HTTP://.....”是强制性的。 节点：app.js

app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.header("Access-Control-Allow-Credentials", true);
    next();
});