''Access-Control-Allow-Origin' 标头出现在请求的资源上

Question

我正在尝试将 React.js 中的数据发布到本地主机 insert.php 文件。当我从 reactjs 提交表单时，它在控制台上出现错误错误是：

1. 从源“http://localhost:3000”访问“http://localhost/reactphpdemo/connect.php”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

1. xhr.js:177 POST http://localhost/reactphpdemo/connect.php net::ERR_FAILED
2. createError.js:16 Uncaught (in promise) 错误：createError (createError.js:16) 处的网络错误 XMLHttpRequest.handleError (xhr.js:84)

这是我的代码

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

export default class Insert extends Component {
constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);

    this.state={
        first_name:'',
        last_name:'',
        email:''
    }
}
onSubmit(e){
    e.preventDefault();
    const obj = {
        headers:{'Access-Control-Allow-Origin':'*'},
        first_name:this.state.first_name,
        last_name:this.state.last_name,
        email:this.state.email,
    };
    axios.post('http://localhost/reactphpdemo/insert.php',obj).then(res=>console.log(res.data));
    this.setState({
        first_name:'',
        last_name:'',
        email:''
    })
}
render() {
    return (
        <form onSubmit={this.onSubmit}>
            <div class="form-group">
                <input type="submit" value="Register User" class="btn btn-primary" name="name" />
            </div>
        </form>
    )   
}

Answer 1

只需将这些添加到您的 .php 文件中即可：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: 'X-Requested-With,content-type'");
header("Access-Control-Allow-Methods: 'GET, POST, OPTIONS, PUT, PATCH, DELETE'");

或者您可以使用 Chrome 插件，例如“Moesif Origin & CORS Changer”