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

Posted 2023-02-21

【中文标题】跨源请求仅支持协议方案错误反应

【英文标题】：Cross origin requests are only supported for protocol schemes error in react

【发布时间】：2018-10-03 15:38:19

【问题描述】：

当我尝试使用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;

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案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();
   )

这应该可以解决它。

【参考方案4】：

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

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

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

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

【讨论】：

我已经在使用代理，nodejs 文件运行在 3001 并且 react 运行在 3000

如果您的代理工作正常，您不需要引用 localhost:3000/doctors/register 只需 /doctors/register

现在是它的工作人员 :) 将其发布为单独的答案，我会将其标记为已验证的答案

干杯！很高兴它现在可以工作，然后添加了单独的答案

【参考方案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();
);